時隔好多好多天,我又滿血復活了,首先解決了一個大問題。剛到公司,領導給安排了一個小任務,是公司馬上推出的項目用到的。一個文本框,裏面有原來保存的手機號,現在點擊修改按鈕可以添加,但是不能刪除原來保存的,不能修改原來保存的,也不能在原來保存的內容的前面添加其他內容。雖然不知道這樣有啥用,但是領導安排了就要幹,於是我就從網上查資料,問朋友。都說這樣不可能,網上說的是input框前面加一個span標籤,然後input輸入的內容通過事件添加到span中原內容的後面。也有朋友說弄兩個input框,然後把邊框設置一下,讓他們看起來像一個,但是我總感覺這樣不好,既然查不到,那就自己想辦法。其實一開始就想到從光標出發,根據光標的位置來確定input的屬性,即是否可以輸入,功夫不負有心人,還真的讓我給弄出來了,下面直接上代碼:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本框</title>
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<span>
<input type="text" id="tel" name="tel" value="13277778888"
οnblur="phoneCheck();" oncut="return false;"
οnkeydοwn="noDelete(),phoneAdd();" οnclick="recoverEdit();"/>
</span>
</body>
<script>
function noDelete(){ //原手機號不能刪除
var newtel=$("#tel").val(); //文本框中現在的手機號
if(newtel.length==11){ //判斷新輸入的手機號和原來的手機號是否一致,這裏用位數限制
if(event.keyCode == 46||event.keyCode == 8){//del和backspace按鈕
$("#tel").attr("readonly",true);
//文本框改爲不可輸入狀態
alert("原手機號不可刪除,請直接在後面添加,注意用“;”分隔");
return false;
}
}
}
function phoneAdd(){ //新添加手機號
var newtel = $("#tel").val();
var $input = document.getElementById("tel");
var cursurPosition=0; //光標位置
if($input.selectionStart){//非IE瀏覽器
cursurPosition= $input.selectionStart;
}else{//IE瀏覽器
try{
var range = document.selection.createRange();
range.moveStart("character",-$input.value.length);
cursurPosition=range.text.length;
}catch(e){
cursurPosition = 0;
}
}
if(newtel.length >= 11){ //判斷文本框中內容是否比原來保存的多
if(cursurPosition == 0 ){ //光標在最前面
$("#tel").attr("readonly","readonly");
alert("原手機號前面不可添加");
return false;
}else if(cursurPosition < 11){ //光標在第一個手機號的中間
$("#tel").attr("readonly","readonly");
alert("原手機號不可修改");
return false;
}
}
}
function recoverEdit(){ //文本框恢復可輸入狀態
$("#tel").attr("readonly",false);
}
function phoneCheck(){ //檢測手機號
var abc=$("#tel").val();
var abcs=abc.split(","); //輸入時用“,”隔開,否則會提示錯誤
var i="";
abcs.forEach(function(val,index,arr){
if(arr[index]!=""&&!(/^1(3[0-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/.test(arr[index]))){
i+=(index+1)+",";
console.info(i);
alert("第"+i.substring(0,i.length-1)+"個手機號格式不正確");
}
});
return false;
}
</script>
</html>