js 文本框文本域focus时自动选中内容

Posted Mankii

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 文本框文本域focus时自动选中内容相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>自动选择</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <h1>focus时自动选中内容</h1>
    <input type="text" autoselect start="2" end="4" value="这是内容这是内容这是内容">
    <br><br>
    <textarea autoselect>这是内容这是内容这是内容</textarea>
    <!-- 引入jquery -->
    <script
      src="https://code.jquery.com/jquery-3.3.1.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
    <script>
    /**
     * 自动选择文本框/文本域中的内容
     * @param  {dom} e [必填,必须是input或者textarea]
     * @param  {开始索引值} s [默认:0]
     * @param  {[type]} t [默认:总长度]
     * @return {[type]}   [null]
     */
    function autoselect(e,s,t){
        var startIndex = s ? Number(s) : 0;
        var stopIndex = t ? Number(t) : $(e).val().length;
        if (e.setSelectionRange) {
            e.setSelectionRange(startIndex, stopIndex);
        } else if (e.createTextRange) {
            var range = e.createTextRange();
            range.collapse(true);
            range.moveStart(\'character\', startIndex);
            range.moveEnd(\'character\', stopIndex - startIndex);
            range.select();
        }
        e.focus();
    }

    $("[autoselect]").on("focus",function(e){
      var start = $(this).attr("start");
      var end = $(this).attr("end");
      autoselect(this, start , end);
    });
    </script>
</body>
</html>

效果:

 

以上是关于js 文本框文本域focus时自动选中内容的主要内容,如果未能解决你的问题,请参考以下文章

jquery js 当文本框获得焦点时,自动选中里面的文字

js输入文本时判断是不是停留3秒

当鼠标滑过文本框自动选中输入框内容JS代码

js在opera下怎样获取可编辑div中的鼠标光标和选中文本

js实现默认或者触发一个事件选中元素内容的方法

在winform中怎么样设置文本域根据文本域中显示的内容自动改变大小