您的位置：首页 > 其它

解决input原本保存的内容不能修改，但可以添加的问题

2017-03-27 20:18 337 查看

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

onblur="phoneCheck();" oncut="return false;"

onkeydown="noDelete(),phoneAdd();" onclick="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web 实例

相关文章推荐

新的分享

章节导航