javascript-跨浏览器选中文本框指定长度的值

最新推荐文章于 2024-07-02 16:53:13 发布

harmsworth2016

最新推荐文章于 2024-07-02 16:53:13 发布

阅读量262

点赞数 1

分类专栏： javascript 文章标签： javascript 选中文本编辑器开发跨浏览器选中文本

本文链接：https://blog.csdn.net/harmsworth2016/article/details/80370393

版权

javascript 专栏收录该内容

42 篇文章 2 订阅

订阅专栏

跨浏览器实现选中文本框指定的长度的值

跨浏览器实现选中文本框指定的长度的值

可用于编辑器的功能的开发。

依赖

EventUtil.js

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>10.cross-browser-selectText</title>
        <script src="EventUtil.js"></script>
        <style>
            ul,li{
                list-style:none;
            }
        </style>
    </head>
    <body>
        <form name="myform">
            <label for="name">姓名：</label>
            <input type="text" name="name" autofocus id="name" placeholder="请输入姓名" value="我在哪里"><br>
            <input type="button" value="select-btn" id="select-btn"/>
        </form>
        <script>
            (function(){
                var form = document.forms['myform']
                var elements = form.elements
                var inputText = elements['name']


                var btn = document.querySelector('#select-btn')
                EventUtil.addHandler(btn, 'click', function(event){
                    inputText.focus()
                    selectText(inputText, 0, 1)
                })

                // 在文本框中看到文本被选中的效果（必须让文本框获取焦点）
                function selectText(textbox, startIndex, stopIndex){
                    if (textbox.setSelectionRange){
                        textbox.setSelectionRange(startIndex, stopIndex);
                    } else if (textbox.createTextRange){
                        var range = textbox.createTextRange();
                        range.collapse(true);
                        range.moveStart("character", startIndex);
                        range.moveEnd("character", stopIndex - startIndex);
                        range.select();                    
                    }
                    textbox.focus();
                }
            })()
        </script>
    </body>
</html>