本文记录的是在Drupal里实现Click insert textarea效果的方法,如果只是单纯的实现click insert textarea，只需要一段jquery,更复杂的效果,我们可以通过这个实举一反三.

如何在Drupal实现Click insert textarea效果？本教程讲的是单纯的实现click insert textarea的效果,只需一段jquery,它在token.js里的Drupal.behaviors.tokenInsert 函数,改改寻址class就能用了,示例代码如下:

1. /** 
2.  * Insert rules to textarea. 
3.  */ 
4. Drupal.behaviors.rulesInsert = { 
5.   attach: function (context, settings) { 
6.     // Keep track of which textfield was last selected/focused. 
7.     $('textarea', context).focus(function() { 
8.       Drupal.settings.sv_rulesFocusedField = this; 
9.     }); 
10.  
11.     $('.token-click-insert dd', context).once('token-click-insert', function() { 
12.       var newThis = $('<a href="javascript：void(0);" title="' + Drupal.t('Insert this token into your form') + '">' + $(this).html() + '</a>').click(function(){ 
13.         if (typeof Drupal.settings.sv_rulesFocusedField == 'undefined') { 
14.           alert(Drupal.t('First click a text field to insert your tokens into.')); 
15.         } 
16.         else { 
17.           var myField = Drupal.settings.sv_rulesFocusedField; 
18.           var myValue = $(this).text(); 
19.  
20.           //IE support 
21.           if (document.selection) { 
22.             myField.focus(); 
23.             sel = document.selection.createRange(); 
24.             sel.text = myValue; 
25.           } 
26.  
27.           //MOZILLA/NETSCAPE support 
28.           else if (myField.selectionStart || myField.selectionStart == '0') { 
29.             var startPos = myField.selectionStart; 
30.             var endPos = myField.selectionEnd; 
31.             myField.value = myField.value.substring(0, startPos) 
32.                           + myValue 
33.                           + myField.value.substring(endPos, myField.value.length); //开源软件:phpfensi.com 
34.           } else { 
35.             myField.value += myValue; 
36.           } 
37.  
38.           $('html,body').animate({scrollTop: $(myField).offset().top}, 500); 
39.         } 
40.         return false; 
41.       }); 
42.       $(this).html(newThis); 
43.     }); 
44.   } 
45. }; 

注:rulesInsert 可自定义,寻址class：.token-click-insert dd 需要改成你的,完整效果参看你安装token模块后插入token的效果.

Tags: Drupal textarea效果

分享到：