我可以防止“onblur”事件中选择丢失吗？
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en" lang = "en">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset=utf-8">
<script type = "text/javascript">
window.onload = function () {
var textarea = document.getElementsByTagName ("textarea")[0];
textarea.onblur = function () {
alert ("Should keep selection");
return false;
}
}
</script>
<title>Select me!</title>
</head>
<body>
<textarea>Select me!</textarea>
</body>
</html>
我认为这不是一个好主意。用户手里拿着鼠标可以点击页面上的任意位置。如果你让他/她回到文本区域，它将不遵循网络可访问性的原则。
也许你的意思是你想记住选择，即使用户专注于另一个元素，这样如果他们返回到文本区域，仍然会选择相同的文本。是这样吗？
如果是这样，我认为最简单的方法是将文本区域放在同一域的 iframe 中。每个文档都维护自己的选择上下文。当然，您需要从文本区域读取数据，并可能将其复制到表单中的隐藏字段，因为您不能在另一个文档中的表单中包含字段，因此您需要进行某种代理.
textarea.onblur = function () {
alert("Should keep selection");
textarea.focus();
return false;
}
我已经为你准备了这个js类：
class SelectionHolder{
constructor(element_id){
this.element = document.getElementById(element_id);
this.selection_start = null;
this.selection_end = null;
}
setListener(object){
this.element.onfocus = ()=>{object.reselect();}
this.element.onblur = ()=>{object.update();}
}
update(){
this.selection_start = this.element.selectionStart;
this.selection_end = this.element.selectionEnd;
}
reselect(){
this.element.setSelectionRange( this.selsection_start, this.selection_end, "forward");
}
}
然后将其用于您的元素
Let my_holder = SelectionHolder("my-text-area-id");
my_holder.setListener(my_holder)