如何获得选定的文本从输入上的按钮单击

How to get selected text from input on button click?

本文关键字：输入 按钮 单击 文本 何获得      更新时间：2023-09-26

我试图在单击按钮时获得<input>内的选定文本。

我成功地window.getSelection()获得选定的文本，但是当我单击按钮时，输入的焦点和选定的文本丢失。

我知道有解决方案-我已经看到了一个或两个jQuery库-但我正在寻找一个(希望简单)香草JS解决方案。

<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>

编辑

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

edit:

使用什么Stanimir帖子(因为它处理选择范围更好)与setTimeout时，blur，只有取消超时，如果它直接聚焦到该按钮。

单击事件后，清除选择范围。

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();
});
<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>

如果FocusEvent。relatedTarget成为一个标准，而IE<9不关心(或者你只是喜欢拥抱最新的技术)，你可以使用写的逻辑作为Zach L张贴，这可以使代码更简单。

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();
});
<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>

给你。一个干净的解决方案，无需使用第二个输入字段。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>

我最终想出了一个解决方案，使用FocusEvent.relatedTarget来检查当选择按钮时输入是否失去焦点。

FocusEvent.relatedTarget和Window.getSelection()在IE<9中不支持，在发布时还不是正式的规范的一部分。我觉得它们的广泛采用表明它们将可能保持稳定。

<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>

相关文章：