我试图在单击按钮时在
<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>
编辑
针对下面发布的解决方案,我需要避免的一个问题是之前的选择被有效地缓存。如果用户故意取消选择文本(不是通过单击此特定按钮),我需要它不记住旧的选择。最终目标是在单击按钮时修改选定的子字符串,如果未选择任何内容,则仅附加到它。
给你。一个干净的解决方案,无需使用第二个输入字段。 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>
编辑:
在 setTimeout
时使用
Stanimir帖子(因为它可以更好地处理选择范围)和
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.latedTarget的规范成为标准,并且
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>
FocusEvent.relatedTarget
检查选择按钮时输入是否失去焦点。
IE 不支持 FocusEvent.relatedTarget
和 Window.getSelection()
<9 and at the time of posting are not yet officially part of the spec. I feel that their wide adoption indicates that they will 可能保持稳定。
<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>
<p>Select me and click input</p>
<input id="i1" type="text" onmousedown="document.getElementById('i1').value = document.getSelection().toString()" />