解決input原本保存的內容不能修改,但可以添加的問題

時隔好多好多天,我又滿血復活了,首先解決了一個大問題。剛到公司,領導給安排了一個小任務,是公司馬上推出的項目用到的。一個文本框,裏面有原來保存的手機號,現在點擊修改按鈕可以添加,但是不能刪除原來保存的,不能修改原來保存的,也不能在原來保存的內容的前面添加其他內容。雖然不知道這樣有啥用,但是領導安排了就要幹,於是我就從網上查資料,問朋友。都說這樣不可能,網上說的是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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章