javascript - 如何从单击按钮的输入中获取选定的文本？

Question

我正在尝试获取 <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>

编辑

<小时/>

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

Answer 1

编辑:

用了什么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>