文本输入选择在IE9中不起作用

问题描述：

我试图在单击按钮时在文本输入中获取用户所选文本。这正是我试图：文本输入选择在IE9中不起作用

<head> 
    <script type="text/javascript"> 
     function GetSelectedText() { 
      if (window.getSelection) { // all browsers, except IE before version 9 
       var range = window.getSelection();           
       alert (range.toString()); 
      } 
      else { 
       if (document.selection.createRange) { // Internet Explorer 
document.getElementById("foo").focus(); 
        var range = document.selection.createRange(); 
        alert (range.text); 
       } 
      } 
     } 
    </script> 
</head> 
<body> 
    <button onclick="GetSelectedText()">Get the selected text!</button> 
    <input type = 'text' id = 'foo' />12345 
</body>

它将按预期在所有浏览器，除了IE9。在IE9中，如果您从12345块中选择了一些文本，然后按下按钮，则所选文本会提示好。但是，如果您在文本输入中输入了某些内容，请选择其中的一部分，然后单击该按钮，即会生成空白警报。

谁能告诉我如何让它在IE9中工作？有没有什么办法让选择开始的光标位置（如Mozilla的selectionStart）？ IAM找JavaScript的解决方案，而无需Rangy或其他相关的jQuery库..

其实你的代码将无法在Firefox中工作，要么。 – 2013-02-25 22:54:31

答

文本输入和textareas具有单独的选择API，即输入本身的selectionStart和selectionEnd属性。 IE < = 8不支持这些，但您已经有了这些选择。

这是你的GetSelectedText()功能的实现，在所有主要的浏览器上运行：

演示：http://jsfiddle.net/UK8gA/

代码：

function GetSelectedText() { 
    var selectedText = ""; 
    var input = document.getElementById("foo"); 
    var sel, val = input.value; 
    input.focus(); 
    if (typeof input.selectionStart == "number") { 
     selectedText = val.slice(input.selectionStart, input.selectionEnd); 
    } else if ((sel = document.selection) && sel.createRange) { // IE 
     var range = document.selection.createRange(); 
     selectedText = range.text; 
    } 
    alert(selectedText); 
}

那么，你做了什么不同？你也使用'document.selection.createRange（）'然后'range.text'来获取文本。 – SexyBeast 2013-02-26 07:05:00

没关系，明白了。你能告诉我是否有任何方法来获得起始光标位置？（我认为，“Rangy”毕竟是这样做的！） – SexyBeast 2013-02-26 07:36:46

@Cupidvogel：'selectionStart'就是你需要的。对于旧IE来说，解决方法有点棘手。 http://stackoverflow.com/a/3373056/96100就是一个例子。 – 2013-02-26 09:34:22

答

你可以看看jQuery的插入符插件：jCaret

// Get start pos in intput box with id="box1" 
$("#box1").caret().start 

// Get end pos 
$("#box1").caret().end 

// Get selected text 
$("#box1").caret().text

是的，我知道有像Rangy这样的jQuery解决方案。我正在寻找一个严格的Javascript实施... – SexyBeast 2013-02-25 20:11:19

对不起，我不能帮你。 – Bagata 2013-02-25 20:13:26

没问题..... – SexyBeast 2013-02-25 20:13:49

答

这一切看起来除了行“的document.getElementById好（ “富”）聚焦（）;”似乎没有必要，可能是浏览器无法检测到突出显示的文本的原因。尝试删除它，看看你得到什么。

我稍后添加它看它是否有效。它没有工作没有太.. .. – SexyBeast 2013-02-25 20:19:58

文本输入选择在IE9中不起作用

相关推荐