js实现input选中
选中 input 元素的内容
使用 select() 方法可以选中 input 元素内的文本内容。该方法适用于 <input> 和 <textarea> 元素。
document.getElementById('myInput').select();获取选中文本
通过 selectionStart 和 selectionEnd 属性可以获取选中文本的起始和结束位置。
const input = document.getElementById('myInput');
const startPos = input.selectionStart;
const endPos = input.selectionEnd;
const selectedText = input.value.substring(startPos, endPos);设置选中范围
使用 setSelectionRange() 方法可以指定选中文本的起始和结束位置。
document.getElementById('myInput').setSelectionRange(2, 5);选中全部文本
结合 select() 方法或 setSelectionRange() 方法可以实现全选功能。
const input = document.getElementById('myInput');
input.select();
// 或者
input.setSelectionRange(0, input.value.length);响应事件触发选中
可以在焦点事件或其他交互事件中触发选中操作。
document.getElementById('myInput').addEventListener('focus', function() {
this.select();
});兼容性注意事项
setSelectionRange() 方法在 IE8 及以下版本不支持，需使用 createTextRange 替代。
const input = document.getElementById('myInput');
if (input.createTextRange) {
const range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', endPos);
range.moveStart('character', startPos);
range.select();
} else {
input.setSelectionRange(startPos, endPos);
}结合 CSS 增强视觉效果
可以通过 CSS 伪类 :selection 自定义选中文本的样式。
input::selection {
background-color: #ffb7b7;
color: #000;
}
