當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置

發布時間：2025/3/16 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript實現的通過輸入框中的數據長度來控制光標焦點的位置：

在IE中可以使用 onPropertyChange 屬性來控制非常簡單例子：

<!DOCTYPE?? HTML?? PUBLIC?? "-//W3C//DTD?? HTML?? 4.0?? Transitional//EN">
<HTML>
<HEAD>
<TITLE>?? New?? Document?? </TITLE>
<META?? NAME="Generator"?? CONTENT="EditPlus">
<META?? NAME="Author"?? CONTENT="">
<META?? NAME="Keywords"?? CONTENT="">
<META?? NAME="Description"?? CONTENT="">
<SCRIPT?? LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
??
<BODY>
<INPUT?? TYPE="text"?? NAME="ipt"??? onPropertyChange="lostFocus(this,5)">
<INPUT?? TYPE="text"?? NAME="ipt2"?? onPropertyChange="lostFocus(this,5)">
</BODY>
</HTML>

以上代碼在IE內核的瀏覽器中運行良好，但是用火狐就是不行，好像是火狐中根本就不支持onPropertyChange屬性，要用oninput并添加addeventlistener，在網上找了一下看到了一下的代碼，是通過setInterval去定時檢查輸入框中的數據長度，當為指定的值的時候就改變光標位置：

<html>
<script>
var insObj=new Array();
var timer=null;
function $(id){return document.getElementById(id)};
/*
function changeInspector(id){
insObj[id]=""+$(id).value;
timer=setInterval("inspector('"+id+"')",100);
}
function inspector(sid){
if($(sid).value!=insObj[sid]){
alert("property changed");
insObj[sid]=$(sid).value;
}
}
*/
function changeInspector(id){
//insObj[id]=""+$(id).value.length;
timer=setInterval("inspector('"+id+"')",100);
}
function inspector(sid){
if($(sid).value.length==3){
?? $('mm2').focus();
?? //insObj[sid]=$(sid).value;
}
}
function doinspector(){
changeInspector("mm");
changeInspector("mm2");
}
</script>
<body οnlοad="doinspector()">
<input type="text" id="mm" value=""></input>
<input type="text" id="mm2" value=""></input>
<input type="button" οnclick="document.getElementById('mm').value='aa'" value="改變值"></input>
</body></html>

這樣是可以實現要求的，但是問題出來了，就是你輸入長度為3的數據的時候光標到達下一個框，這時候你要想修改剛才的內容換句話說要把光標重新放回去就不可能了，因為每100毫秒就檢查一次只要是3就改變光標位置嘛，所以這樣使用起來會很不方便，不過這種想法還是可以的。

以下是兼容的代碼（火狐中使用oninput）:

<div id="msg"></div>
<input type="text" id='txt' value="" />
<script>
//當狀態改變的時候執行的函數
function handle()
{
//alert('asdf');
document.getElementById('msg').innerHTML='輸入的文字長度為：'+document.getElementById('txt').value.length;
}
//firefox下檢測狀態改變只能用oninput,且需要用addEventListener來注冊事件。
if(/msie/i.test(navigator.userAgent))??? //ie瀏覽器
{
document.getElementById('txt').onpropertychange=handle
}
else
{//非ie瀏覽器，比如Firefox
document.getElementById('txt').addEventListener("input",handle,false);
}
</script>

以上代碼就可以實現兼容了（PS:火狐的代碼檢查還真是嚴格，剛開始沒寫 input 的type在IE可以在火狐就是不可以后來加上就可以了）

不過在調試的時候還是浪費了不少的時間，因為在IE里加載頁面后就顯示：輸入的內容是0。但是在火狐里死活是不顯示的只有輸入了內容之后才顯示，一開始我以為又有不兼容問題所以就調了半天最后沒有辦法了我就試試輸入了數據結果可以，狂暈！！現在想想是因為剛開始加載頁面的時候是沒有事件產生的所以火狐一向“嚴謹”的作風就不會調用handle了，但是IE不叫寬松就加載了handle函數，當然也許是因為兩家瀏覽器對addEventListener事件的理解不同。

在這里要說一下的是在<input>中可以使用onPropertyChange 在同時也可以使用 oninput這個現象很好，這樣就可以傻瓜式的實現瀏覽器的“兼容了”（直接寫兩個事件就好）。寫一個的話就只有用onload了，但是我還不知道怎么實現。。。

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的使用js函数实现的通过输入框中数据的长度来控制光标聚焦位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。