时隔好多好多天，我又满血复活了，首先解决了一个大问题。刚到公司，领导给安排了一个小任务，是公司马上推出的项目用到的。一个文本框，里面有原来保存的手机号，现在点击修改按钮可以添加，但是不能删除原来保存的，不能修改原来保存的，也不能在原来保存的内容的前面添加其他内容。虽然不知道这样有啥用，但是领导安排了就要干，于是我就从网上查资料，问朋友。都说这样不可能，网上说的是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>