如何从按钮单击输入中获取所选文本?

时间:2015-08-18 14:57:58

标签: javascript getselection

单击按钮时,我试图在<input>内获取所选文字。

我已成功window.getSelection()获取所选文字,但当我点击某个按钮时,输入的焦点和所选文字就会丢失。

我知道有解决方案 - 我已经看过一个或两个jQuery库 - 但我正在寻找一个(希望很简单)的vanilla JS解决方案。

&#13;
&#13;
<p>Select some text then click the button (doesn't work)</p>
<input type="text" size="20" value="select something">
<button id="btn">alert selection</button>

<script>
    document.getElementById('btn') 
        .addEventListener('click', function() {
            alert(window.getSelection().toString());
        });
</script>

<p>Select some text and see it alerted (works)</p>
<input id="input" type="text" size="20" value="select something">
<script>
    document.getElementById('input')
        .addEventListener('click', function() {
            alert(window.getSelection().toString());
        });
</script>
&#13;
&#13;
&#13;

修改

对于下面发布的解决方案,我需要避免的一个问题是以前的选择实际上是缓存。如果用户故意取消选择文本(而不是通过单击此特定按钮),我需要记住旧选择。最终的目标是在单击按钮时修改选定的子字符串,如果没有选择任何子字符串只是附加到它。

3 个答案:

答案 0 :(得分:3)

已编辑:

setTimeout时使用Stanimir帖子(因为它更好地处理选择范围)和blur,并且只有在它直接关注该按钮时才取消超时。

然后在单击的事件之后,清除选择范围。

&#13;
&#13;
var input = document.getElementById('test');
var btn = document.getElementById('btn');
var blur = null;
var clearSelect = function() {
  input.setSelectionRange(0, 0);
};
input
  .addEventListener('blur', function() {
    blur = setTimeout(clearSelect, 0);
  });
btn
.addEventListener('focus', function() {
  if (blur !== null) {
    clearTimeout(blur);
    blur = null;
  }
});
btn
.addEventListener('click', function() {
  alert(input.value.substring(input.selectionStart, input.selectionEnd));
  clearSelect();
});
&#13;
<p>Select some text then click the button</p>
<input type="text" size="20" id="test" value="select something">
<button id="btn">alert selection</button>
&#13;
&#13;
&#13;

如果FocusEvent.relatedTarget的规范成为标准,并且IE<9不受关注(或者您只是喜欢接受最新技术),则可以使用写入逻辑Zach L发布,这可以使代码更简单。

&#13;
&#13;
var input = document.getElementById('test');
var btn = document.getElementById('btn');
var clearSelect = function() {
  input.setSelectionRange(0, 0);
};
input
  .addEventListener('blur', function(e) {
    // e.relatedTarget would be the elment that will get focus, if click on something that can't be focus
    // the value will be null.
    if (e.relatedTarget !== btn) {
      clearSelect();
    }
  });
btn
.addEventListener('click', function() {
  alert(input.value.substring(input.selectionStart, input.selectionEnd));
  // You can either focus back to the input or just clear the selection range in the input.
  //input.focus();
  clearSelect();
});
&#13;
<p>Select some text then click the button</p>
<input type="text" size="20" id="test" value="select something">
<button id="btn">alert selection</button>
&#13;
&#13;
&#13;

答案 1 :(得分:3)

你走了。一个干净的解决方案,无需使用第二个输入字段。 http://jsfiddle.net/5kq4yecz/1/

document.getElementById('btn').addEventListener('click', function() {
  alert(test.value.substring(test.selectionStart, test.selectionEnd));
});
<p>Select some text then click the button</p>
<input type="text" size="20" id="test" value="select something">
<button id="btn">alert selection</button>

答案 2 :(得分:2)

我最终提出了一种解决方法,使用FocusEvent.relatedTarget检查选择按钮时输入是否失去焦点。

IE&lt; 9不支持

FocusEvent.relatedTargetWindow.getSelection(),并且在发布时尚未正式成为规范的一部分。我觉得他们的广泛采用表明他们可能保持稳定。

&#13;
&#13;
<p>Select some text then click the button</p>
<input id="input" type="text" size="20" value="select something">
<button id="btn">alert selection</button>

<script>
    var input = document.getElementById('input');
    var btn = document.getElementById('btn');

    btn.addEventListener('click', function() {
        input.focus();
        var selection = window.getSelection().toString();
        alert(selection);
    });

    input.addEventListener('blur', function(e) {
        if (e.relatedTarget !== btn) {
            input.setSelectionRange(0, 0);
        }
    });
</script>
&#13;
&#13;
&#13;