input输入框控制光标位置 setSelectionRange()的使用
当我们点击编辑时,按照习惯,光标应该在字符串的结尾,在不对光标进行任何设置的情况下,光标是出现在开头的,所以要进行相关操作。要明白,selectionStart<=selectionEnd ,两个值相等时,就是一个光标,后者大于前者时,就是选中部分内容,当我们偏要把selectionStart的值设的大于selectionEnd时,运行时会自动将selectionStart的值赋值给selecti
当我们点击编辑时,按照习惯,光标应该在字符串的结尾,在不对光标进行任何设置的情况下,光标是出现在开头的,所以要进行相关操作。
setSelectionRange(selectionStart, selectionEnd)
该方法是对光标进行操作的, selectionStart, selectionEnd 为控制光标位置的参数,我们用例子来了解:
selectionStart = 0 , selectionEnd = 0
selectionStart = 3 , selectionEnd = 3
selectionStart = 3 , selectionEnd = 7
selectionStart = 0 , selectionEnd = 11
要明白, selectionStart<=selectionEnd ,两个值相等时,就是一个光标,后者大于前者时,就是选中部分内容,当我们偏要把selectionStart的值设的大于selectionEnd时,运行时会自动将selectionStart的值赋值给selectionEnd,使之相等。
案例1
<template>
<div>
<!-- autofocus="autofocus" 加入该属性会自动获取焦点-->
<input id="edit" type="text" value='零一二三四五六七八九十' >
<button @click="getSelect(1,5)">选择指定区域</button>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
getSelect(res1,res2){
const editValue = document.getElementById("edit");
editValue.focus(); //控制光标,首先要获取到焦点
edit.setSelectionRange(res1,res2);
console.log(edit.selectionStart);
console.log(edit.selectionEnd);
},
}
}
</script>
<style scoped>
div{
height: 40px;
width:260px;
}
input{
margin:10px 10px 10px 10px ;
}
</style>
结果:
点击 选择指定区域时,会自动选择 “一二三四” ,selectionStart = 1 , selectionEnd = 5
当然 也可以直接修改 selectionStart, selectionEnd 的值,不用setSelectionRange()方法。
getSelect(res1,res2){
const editValue = document.getElementById("edit");
editValue.focus(); //控制光标,首先要获取到焦点
edit.selectionStart = res1
edit.selectionEnd = res2
// edit.setSelectionRange(res1,res2);
console.log(edit.selectionStart);
console.log(edit.selectionEnd);
},
}
效果和原来是一样的。
案例2
先看效果:
代码:
<template>
<div>
<!-- autofocus="autofocus" 加入该属性会自动获取焦点-->
<input ref="inputTitle" id="edit" type="text" value='零一二三四五六七八九十' >
<button @click="getedit(-1)">光标前移</button>
<button @click="getedit(1)">光标后移</button>
<button @click="selectAll()">{{isSelectAll}}</button>
</div>
</template>
<script>
export default {
data() {
return {
isSelectAll:'全选文本'
};
},
methods: {
getedit(res){
const editTask = document.getElementById("edit");
editTask.focus();
edit.setSelectionRange(edit.selectionStart+res, edit.selectionEnd+res);
},
//全选内容
selectAll(){
const editTask = document.getElementById("edit");
editTask.focus();
if(this.isSelectAll == '全选文本'){
editTask.selectionStart = 0
// this.$refs.inputTitle.value.length 为input框中文本长度
editTask.selectionEnd = this.$refs.inputTitle.value.length
this.isSelectAll = '取消全选'
}else{
editTask.selectionStart = 0
editTask.selectionEnd = 0
this.isSelectAll = '全选文本'
}
}
}
}
</script>
<style scoped>
div{
height: 40px;
width:260px;
}
input{
margin:10px 10px 10px 10px ;
}
</style>
更多推荐
所有评论(0)