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