js实现鼠标点击自动选中点击元素内的文字

最新推荐文章于 2025-10-26 14:49:05 发布

原创最新推荐文章于 2025-10-26 14:49:05 发布 · 9.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js #点击自动选中元素内文字 #Selection #Range

JQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在网页上实现点击元素内文字自动选中的效果，包括输入框和普通元素如div、p等。通过JavaScript和jQuery，提供代码示例帮助读者快速实现功能。

最近需要在页面上实现一个点击元素（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~ 希望能有所帮助