相关文章推荐
俊秀的凳子  ·  Python ...·  1 年前    · 
细心的拖把  ·  VBA Excel ...·  1 年前    · 
谦和的风衣  ·  NIO 总结 - 萌新J - 博客园·  2 年前    · 

在文本框光标位置插入内容在实际的项目应用中经常用到,比如在文本框插入表情,首先要获取光标在文本框中的位置,当然这个有浏览器兼容性问题。

IE下可以通过document.selection.createRange();获取光标位置,代码也很简单:

  1. if ( document . selection ) {
  2. pos = document . selection . createRange ();
  3. pos . text = "要插入的字符串" ;
  4. }
Firefox浏览器则稍微负责一点,需要首先获取光标位置,然后对value进行字符串截取处理:
  1. if ( obj . selectionStart || obj . selectionStart == '0' ) { //obj是文本框对象
  2. var startPos = obj . selectionStart ;
  3. var endPos = obj . selectionEnd ;
  4. obj . value = obj . value . substring ( 0 , startPos ) + "要插入的字符串" + obj . value . substring ( endPos , obj . value . length );
  5. obj . selectionStart = startPos + myValue . length ;
  6. obj . selectionEnd = startPos + myValue . length ;
  7. } else {
  8. obj . value += "要插入的字符串" ;
  9. }
现在微博很火,我们可以尝试一下插入话题,你点击话题,在光标位置就会插入:#请在这里输入自定义话题#,注意,“请在这里输入自定义话题”这几文字是被选中,你可以直接敲打键盘编辑文本。在火狐下先对比较简单,我们只要在上面的代码中插入一句就可以了:
  1. obj . setSelectionRange ( startPos - t , obj . selectionEnd + t );
t是根据数值选中插入文本内容两边的边界数值,如:0是表示插入文字全部选择,-1表示插入文字两边各少选中一个字符。 但是在ie下比较麻烦,要设置光标的位置,然后选中文字。 完整代码如下:
  1. ( function ( $ ) { http : //www.css88.com/archives/3627
  2. $ . fn . insertContent = function ( myValue , t ) {
  3. var $t = $ ( this )[ 0 ];
  4. if ( document . selection ) { //ie
  5. this . focus ();
  6. var sel = document . selection . createRange ();
  7. sel . text = myValue ;
  8. this . focus ();
  9. sel . moveStart ( 'character' , - l );
  10. var wee = sel . text . length ;
  11. if ( arguments . length == 2 ) {
  12. var l = $t . value . length ;
  13. sel . moveEnd ( "character" , wee + t );
  14. t <= 0 ? sel . moveStart ( "character" , wee - 2 * t - myValue . length ) : sel . moveStart ( "character" , wee - t - myValue . length );
  15. sel . select ();
  16. }
  17. } else if ( $t . selectionStart || $t . selectionStart == '0' ) {
  18. var startPos = $t . selectionStart ;
  19. var endPos = $t . selectionEnd ;
  20. var scrollTop = $t . scrollTop ;
  21. $t . value = $t . value . substring ( 0 , startPos ) + myValue + $t . value . substring ( endPos , $t . value . length );
  22. this . focus ();
  23. $t . selectionStart = startPos + myValue . length ;
  24. $t . selectionEnd = startPos + myValue . length ;
  25. $t . scrollTop = scrollTop ;
  26. if ( arguments . length == 2 ) {
  27. $t . setSelectionRange ( startPos - t , $t . selectionEnd + t );
  28. this . focus ();
  29. }
  30. }
  31. else {
  32. this . value += myValue ;
  33. this . focus ();
  34. }
  35. };
  36. })( jQuery );
调用方式:
  1. $ (文本域选择器). insertContent ( "插入的内容" );
  2. //根据数值选中插入文本内容两边的边界
  3. $ (文本域选择器). insertContent ( "插入的内容" ,数值);
在文本框光标位置插入内容在实际的项目应用中经常用到,比如在文本框插入表情,首先要获取光标在文本框中的位置,当然这个有浏览器兼容性问题。IE下可以通过document.selection.createRange();获取光标位置,代码也很简单:1if (document.selection) {2
代码如下: // //使用方法 //$(文本域选择器). insert Content (“ 插入 内容 ”); //$(文本域选择器). insert Content (“ 插入 内容 ”,数值); //根据数值 选中 插入 文本 内容 两边的边界, 数值: 0是表示 插入 文字全部选择,-1表示 插入 文字两边各少 选中 一个字符。 // //在 光标 位置 插入 内容 , 并 选中 (function($) { $.fn.extend({ insert Content : function(myValue, t) { var $t = $(this)[0]; if (document.selection) { //ie this.focus()
假设有一张很大的图,比手机屏幕大的多(scrollView和手机屏幕一样大小), content Size就是指这张图的大小, content Inset就是指,当用手机屏幕显示这张图的最边缘,这张图的边缘和手机屏幕边缘之间的空白距离就是 content Inset,即手机屏幕所能显示这张图边界外空白的最大距离。 content Offset是指,以这张图的左上角为原点,向右下XY为正,con...
文本框 光标 位置 插入 内容 在实际的项目应用中经常用到,比如在 文本框 插入 表情,首先要获取 光标 文本框 中的 位置 ,当然这个有浏览器兼容性问题。 IE下可以通过document.selection.createRange();获取 光标 位置 ,代码也很简单: if (document.selection) { pos = document.selection.createRange(); p
//使用方法 //$(文本域选择器). insert Content (" 插入 内容 "); //$(文本域选择器). insert Content (" 插入 内容 ",数值); //根据数值 选中 插入 文本 内容 两边的边界, 数值: 0是表示 插入 文字全部选择,-1表示 插入 文字两边各少 选中 一个字符。 //在 光标 位置 插入 内容 , 并 选中 (function($) { $.fn.extend...