IE上input文本框聚焦后重新赋值，光标移动到最左端

最新推荐文章于 2024-07-17 14:47:00 发布

baby加油_

最新推荐文章于 2024-07-17 14:47:00 发布

阅读量963

点赞数

分类专栏： js 适配问题文章标签： js ie

本文链接：https://blog.csdn.net/qq_34664239/article/details/115969225

版权

js 同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

适配问题

6 篇文章 0 订阅

订阅专栏

本文展示了如何在HTML和Vue项目中处理输入框获取焦点时自动填充值并使光标移至末尾的技术。通过JavaScript实现onfocus事件监听，利用setSelectionRange或createTextRange方法确保焦点在输入框内容的末尾。

摘要由CSDN通过智能技术生成

直接上方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="test">
    <script>
        var ele = document.getElementById("test");
        ele.onfocus = function(){
            ele.value = "1213231";
            moveToEnd(ele)
        }
        function moveToEnd(ele){
            var val = ele.value;
            if(ele.setSelectionRange){
                ele.setSelectionRange(val.length,val.length);
            }else{
                var range = ele.createTextRange();
                range.collapse(true);
                range.moveStart("character",val.length);
                range.moveEnd("character",0);
                range.select();
            }
        }
    </script>
</body>
</html>

在vue项目中的处理

<el-input 
	v-model="form.tranLmtF" 		
	@focus="focus_Amount('tranLmt',$event)">
</el-input>

focus_Amount(filedName,ele) {
	let that = filedName + "F";
	form[that] = form[filedName];
  	let obj = ele.srcElement;
	if(obj.setSelectionRange){
	   obj.setSelectionRange(obj.value.length,obj.value.length);
	 }else{
		var range = obj.createTextRange();
		range.collapse(true);
		range.moveStart("character",obj.value.length);
		range.moveEnd("character",0);
		range.select();
	}
}