最近需要在页面上实现一个点击元素(p、div等等)内文字,文字自动选中的效果,找了一圈最后终于实现了,现总结如下:
1、如果是要选中输入框(input、textarea)内的文字,代码如下:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动选择文本框/编辑框中的文字</title>
<script type="text/javascript">
function selectInput(){
if (document.form1.title.focus){
document.form1.title.select();}
}
function selectArea(){
if (document.form1.content.focus){
document.form1.content.select();}
}
</script>
</head>
<body style="font-size:12px">
<form name="form1">
<input name="title" type="text" size="50" value="选中input文字" onClick="selectInput()">
<textarea name="content" cols="50" rows="6" onClick="selectArea()">选中textarea文字</textarea>
</form>
</body>
</html>
原版地址: https://www.jb51.net/article/71317.htm
具体原理不清楚,需要的同学可以直接把代码粘到(菜鸟教程在线编辑器:https://www.runoob.com/try/try.php?filename=tryjs_events)进行测试。注意点是:form表单需要对name属性赋值,需要选中的元素也要对name属性赋值
2、如果需要选中的文本是普通元素(div、p、span之类),代码如下:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动选择文本框/编辑框中的文字</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("div").on("click", function(){
var selection = window.getSelection();
selection.removeAllRanges();
var range = document.createRange();
range.selectNodeContents(document.getElementById($(this).attr('id'))); // 需要选中的dom节点
selection.addRange(range);
})
})
</script>
</head>
<body style="font-size:12px">
<div id="content">需要选中的文字</div>
</body>
</html>
参考链接:https://developer.mozilla.org/en-US/docs/Web/API/Range/selectNodeContents
需要的同学可以直接把代码粘到(菜鸟教程在线编辑器: https://www.runoob.com/try/try.php?filename=tryjs_events)进行测试。
简单解释一下:Selection:通过window对象获取一个selection对象,表示用户选择的文本范围或插入符的当前位置;
Range:表示一个包含节点与文本节点的一部分的文档片段;而 range.selectNodeContents(dom) 则是使range对象包含dom节点的内容
最后使用 selection.addRange(range);方法 把当前元素内的文字选中。
THE END~ 希望能有所帮助