ps:仅记录作为个人学习使用,也分享给同样需要的小伙伴,如有错误麻烦评论指教一下,谢谢!

下面的例子是Vue的一个实例(JavaScript中同理使用,因为Vue的本质就是一套构建用户界面的渐进式JavaScript框架)。
获得焦点的操作比较常见,可以重点关注如何实现在获得焦点的同时实现文本全选中状态

<div id="app">
    <button @click='focusEvent'>获取焦点且文本选中状态</button>
    <input type="text" id="test" value="Hello Vue!">
</div>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        methods: {
            focusEvent: function () {
                var input = document.querySelector('#test')  //获取dom对象
                var value = input.value  //获取input的值
                input.focus()  //获得焦点
                input.setSelectionRange(0, value.length)  //设置选中全部文本
            }
        }
    })
</script>

因此,获取对象用的是focus()函数,选中全部文本用的是setSelectionRange(start,end)函数

Logo

前往低代码交流专区

更多推荐