html TextRange的使用

最新推荐文章于 2025-12-03 17:30:31 发布

转载最新推荐文章于 2025-12-03 17:30:31 发布 · 650 阅读

HTML5、CSS、JavaScript 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一个简单的网页应用，该应用允许用户通过点击按钮在文本框中插入自定义的话题标签，并确保标签被选中以便进一步编辑。代码示例涵盖了JavaScript实现细节，包括对不同浏览器的兼容性处理。

<textarea id="target">fdajklfj al</textarea>
        <p><button id="btn">插入话题</button></p>
        <script language="javascript">
            var $ = function (id) {
                return document.getElementById(id);
            };
            $("btn").onclick = function () {
                var con = "请在这里输入自定义话题";
                //转载文字
                $("target").value += "#" + con + "#";
                var l = $("target").value.length;
                //创建选择区域
                if ($("target").createTextRange) {//IE浏览器
                    var range = $("target").createTextRange();
                   // range.moveEnd("character", -l)
                    //range.moveStart("character",-l)
                    range.moveEnd("character", l - 1);
                    range.moveStart("character", l - 1 - con.length);
                    range.select();
                } else {
                    $("target").setSelectionRange(l - 1 - con.length, l - 1); // 一共13   range(1,12); 1< =12
                    $("target").focus();
                }
            };
        </script>