javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff)

项目中正好用到
做下笔记方便以后查找

ie获取光标的位置使用document.selection.createRange()

火狐下使用document.getElementById(id).selectionStart
和 document.getElementById(id).selectionEnd

假设我们要获得id为txt的Textarea元素里面光标所选择的内容

首先创建一个获得光标所选内容的函数(参数:火狐下需要Dom元素
select_field=document.getElementById(txt))

var word="";

function getFieldSelection(select_field) {
     if
(document.selection) {//这里判断是否是ie浏览器
     var sel =
document.selection.createRange();//document.selection.createRange() 根据当前文字选择返回
TextRange 对象,或根据控件选择返回 ControlRange 对象。配合 execCommand,在 HTML
编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等
         
  if (sel.text.length > 0) {// document.selection.createRange().text就是获取文本域里选中的一段文字,大于0判断是否有选中
 
          word = sel.text;
     
      }
     }
    else if
(select_field.selectionStart || select_field.selectionStart == ‘0‘) {//这里判断浏览器是否是火狐
     
    var startP = select_field.selectionStart;//获得光标选中内容的开始位置
 
        var endP = select_field.selectionEnd;//获得光标选中内容的结束位置
 
        if (startP != endP) {//判断是否选中了
如果位置一样 说明没有选中
          word =
select_field.value.substring(startP, endP);//用substring截取选中的内容
 
        }
     }
}

上述就可以拿到选中的内容了

接下来我们把选中的内容插入到另一个文本框中

$("#txtMoudler").click(function () {
     var select_field
= $(this)[0];
     var content =word;
   
 if (content != "") {
         if
(document.selection) {//ie6
         var sel =
document.selection.createRange(); //获取ie光标位置
       
     if (document.selection.type != "None") {
   
          sel.text = content;
     
        sel.select();//光标设置到添加内容的后面
     
       }
        }
   
     else if (select_field.selectionStart ||
select_field.selectionStart == ‘0‘) {//这里判断浏览器是否是火狐
 
           var start =
select_field.selectionStart; //获取光标焦点前坐标
         
   var end = select_field.selectionEnd; //获取光标焦点后坐标

//重新写入文本框中的内容
 
           select_field.value =
select_field.value.substring(0, start) + content +
select_field.value.substring(end, select_field.value.length);
   
         var lengths = select_field.value.substring(0,
Number(start)).length + content.length;
         
   select_field.setSelectionRange(lengths,
lengths);//光标设置到添加内容的后面
           
 $(this).focus();
           
 }
      }

});

javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff),布布扣,bubuko.com

时间: 2024-12-26 07:05:21

javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff)的相关文章

下拉框——把一个select框中选中内容移到另一个select框中遇到的问题

在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来的select框中,代码如下:                  <select class="select1" name="select1" multiple="multiple">                     <op

如何验证文本框中的内容是否为数字

如何验证文本框中的内容是否为数字:在某些情况下可能需要让文本框中的内容只能够输入数字,例如手机号码或者邮编之类的,下面简单介绍一下如何实现此功能.下面是验证数字的正则表达式: "^\\d+$" //非负整数(正整数 + 0) "^[0-9]*[1-9][0-9]*$" //正整数 "^((-\\d+)|(0+))$" //非正整数(负整数 + 0) "^-[0-9]*[1-9][0-9]*$" //负整数 "^-?\

DEV中dx:ASPxPopupControl 控件的使用(在窗口关闭或隐藏时,清楚文本框中的内容)

//在窗口关闭或隐藏时,清楚文本框中的内容(核心代码) function(s, e) { ASPxClientEdit.ClearGroup('entryGroup'); } <asp:Content ID="Content1" ContentPlaceHolderID="ContentHolder" runat="Server"> <script type="text/javascript"> //

checkbox点击选中,再点击取消,并显示在文本框中

function checkItem(e,itemId) { var item = document.getElementById(itemId); var $items = $(item); if (e.checked) { var checkval = $items.val(); var str = $("#txtFilePath").val() + checkval; $("#txtFilePath").val(str); } else { var a = &

如何禁止复制和黏贴文本框中的内容

如何禁止复制和黏贴文本框中的内容:在填写表单的时候,有时候会禁止复制黏贴一些重要的表单内容.例如,在充值话费的时候,需要填写两次手机号码,这个手机号码就不允许赋值黏贴,以防止手机号码填写错误.下面就通过实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>如何禁止文本框内容赋值黏贴</title> &

点击鼠标清除文本框中的内容

点击鼠标清除文本框中的内容:一般内容型的网站都有搜索功能,在默认状态下搜索框中都有默认的提示文本,例如“请输入要搜索的关键词”,但当搜索框获得焦点的时候,默认的提示文本内容会被清空,下面就简单介绍以下如何实现此功能,代码实例如下: <!<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示-面试题

用javascript实现控制一个文本框的输入字数限制,超出字数限制文本框飘红显示. html <textarea name="" id="text" cols="30" rows="10" maxLength=10></textarea><br> <span id="span"></span> javascript var str = docum

JavaScript实现在页面上的文本框中输入小写字母自动变为大写字母

<script language="javascript" type="text/javascript"> $(function () { $("input[type=text]").keyup(function () { $(this).val($(this).val().toUpperCase()); }); }); </script> $("input[type=text]") 处可为文本框ID,

JavaScript实现在文本框中输入空格时自动填写某个值

<script language="javascript" type="text/javascript"> var txtText4 = "#" + '<%= new DynamicControl(this, "Text4").ClientID%>'; $(function () { $(txtText4).keyup(function (e) { if (e.which == 32) $(this).