html多行文本将焦点(光标)置于末端

最新推荐文章于 2024-12-07 17:19:15 发布

言午廴聿言成

最新推荐文章于 2024-12-07 17:19:15 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html实用技术点文章标签： html

本文链接：https://blog.youkuaiyun.com/u014697540/article/details/96425695

html实用技术点专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在HTML中实现多行文本框聚焦时，光标自动移动到文本末尾的需求。提供了针对IE浏览器的特有方法和一种通用解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

当我在多行文本域编辑了一段文字时，我希望我离开后，再重新回来编辑时，点击该文本域，然后我的输入光标会显示在文本的末尾。

方法一（IE浏览器独有）：

 	<textarea rows="7" cols="49" id="box" onFocus="tellPoint()"></textarea>
    <script>
        function tellPoint() {

            //获取到产生事件标签的TextRange对象
            var rng = event.srcElement.createTextRange();

            var len = event.srcElement.value.length;

            //改变焦点（光标）位置
            rng.moveStart("character", len)//moveStart("character",位置)
            rng.collapse(true)
            rng.select()

        }
    </script>

方法二（通用）：

	 <div style="position: relative">
        <textarea id="text" style="position: absolute;top: 0; height: 300px;width: 300px;" onChange="zzc()"></textarea>
        <div id="ccz" onClick="setFocus()" style="position: absolute;top: 0; height: 300px;width: 300px;"></div>
    </div>
    <script>
        function setFocus() {
        	//为多行文本域添加焦点
            $("#text").focus();
            //将盖在文本域上面的div隐藏
            $("#ccz").hide();
        }
        //onChange事件： 当焦点离开文本域时将div重新显示
        function zzc() {
            $("#ccz").show();
        }
    </script>