JS实现输入框默认获得焦点且文本全选中状态
ps:仅记录作为个人学习使用,也分享给同样需要的小伙伴,如有错误麻烦评论指教一下,谢谢!下面的例子是Vue的一个实例(JavaScript中同理用,因为Vue的本质就是一套构建用户界面的渐进式JavaScript框架)。获得焦点的操作比较常见,可以重点关注如何实现在获得焦点的同时实现文本全选中状态:(下面只展示核心代码,其他非关键代码已删掉,可能出现前后不连贯的代码,但看重点即可!)<div
·
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)函数!
更多推荐
已为社区贡献1条内容
所有评论(0)