js或者jquery获取input鼠标选中的内容，并且变红。

jquery鼠标jshtml

解决方案 »

  1.   

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Test</title>
        <style type="text/css">
            div{
              display: none;
            }
        </style>
    </head>
    <body>
        <input type="text" id="txt" value="" /> 
        <input type="button" value="获取文本框内的值" id="btn" onclick="getText();"/>
        <div id="showText">
          
        </div>
        <script type="text/javascript">
          function getText () {
            var showText = document.getElementById("showText");
            showText.style.display = "block";
            showText.style.color = "red";
            showText.innerHTML=document.getElementById("txt").value;
          }
        </script>
    </body>
    </html>
      

  2.   

    比如说文本框里有8个字符，我只选中其中的4个，或者几个，而不是全部选中，该肿么办啊用slice方法截取
      

  3.   

    你个这个方法根本不可行，因为在input里面选中内容，如果点击按钮，Input失去焦点，也就清除了选中的内容，你还怎么在这个时候获取选中的内容。
    参考: Highlight and Capture Text Using jQuery
    思路应该是绑定鼠标事件(也许还有键盘相应的事件)，然后获取getSelection(考虑跨浏览器兼容，需要做相应的判断，具体见上面的参考链接)，把选择的文本或者位置存起来，然后在点击按钮的时候，提取出来。
    因为楼主要求的是在Input里面，而Input里面不能直接设置选中部分的样式，所以只能模拟，即在Input上面用一个<span>或其他的标签加上样式，放在选中的文本上面。
    用slice方法截取
      

  4.   


    问题是getSelection我不太会用，我知道他在ie和ff下有不同，你能帮我写个getSelection获取input value的例子吗
      

  5.   

    兼容浏览器的getSelection演示代码，在IE11和Chrome34上测试过，先在绑定的是mouseup事件，其他浏览器的兼容性的可以自己测试一下
      

  6.   

    大侠，我不太会Js，能写出来具体怎么执行吗。。问题是getSelection我不太会用，我知道他在ie和ff下有不同，你能帮我写个getSelection获取input value的例子吗
      

  7.   

    我在6楼给出了一个演示代码了，你点击打开，用鼠标选择一下右下窗口的input或者div的文字，就可以看到在Selected Text:右边显示你选中的字符了。
    如果你只想绑定id为txt这个Input元素，把第34行的$(document)换成$('#txt')，如果你想绑定所有的Input元素，可以换成$('input')。问题是getSelection我不太会用，我知道他在ie和ff下有不同，你能帮我写个getSelection获取input value的例子吗
      

  8.   


    问题是getSelection我不太会用，我知道他在ie和ff下有不同，你能帮我写个getSelection获取input value的例子吗
    多谢了。搞定了