ユーザーが入力から特定の文字を削除できないようにする

Question

国番号付きの電話番号の入力を試みています。私はデフォルトで+を入れますが、それは取り外し可能です。どうすれば固定式にすることができますか？ユーザーは+を入力から削除できません。

document.getElementById("phonenumber").onkeypress = function(evt) { 
 
    var charCode = (evt.which) ? evt.which : event.keyCode; 
 
    if (charCode == 13) return true; 
 
    if ((charCode > 31) && (charCode < 48 || charCode > 57)) { 
 
    document.getElementById("phonenumber").style.backgroundColor = "rgba(255,0,0,0.5)"; 
 
    document.getElementById("lblphonenumber").innerHTML = "Phone number is invalid"; 
 
    return false; 
 
    } else { 
 
    document.getElementById("phonenumber").style.backgroundColor = "white"; 
 
    document.getElementById("lblphonenumber").innerHTML = "Phone number is valid"; 
 
    return true; 
 
    } 
 
}

<label id="lblphonenumber" for="phonenumber" class="form-field-label">Please enter your phone number with country code</label> 
 
<br/> 
 
<input type="text" id="phonenumber" name="phonenumber" value="+" size="20">

Answer 1

することで、あなたがすることができるこの方法。

document.getElementById("phonenumber").onkeypress = function(evt) { 
 
    var charCode = (evt.which) ? evt.which : event.keyCode; 
 
    if (charCode == 13) return true; 
 
    if ((charCode > 31) && (charCode < 48 || charCode > 57)) { 
 
    document.getElementById("phonenumber").style.backgroundColor = "rgba(255,0,0,0.5)"; 
 
    document.getElementById("lblphonenumber").innerHTML = "Phone number is invalid"; 
 
    return false; 
 
    } else { 
 
    document.getElementById("phonenumber").style.backgroundColor = "white"; 
 
    document.getElementById("lblphonenumber").innerHTML = "Phone number is valid"; 
 
    return true; 
 
    } 
 
}

<style> 
 
    label { 
 
    position: relative; 
 
    } 
 
    label::after { 
 
    content: "+"; 
 
    display: block; 
 
    position: absolute; 
 
    left: 4px; 
 
    top: 20px; 
 
    font-size: 14px; 
 
    } 
 
    input { 
 
    padding-left: 12px; 
 
    } 
 
</style> 
 
<label id="lblphonenumber" for="phonenumber" class="form-field-label">Please enter your phone number with country code</label> 
 
<br/> 
 
<input type="text" id="phonenumber" name="phonenumber" value="" size="20">

Answer 2

簡単にCSSでこれを行うことができます。

が、それでもあなたはこのような何かを試すことができますJavaScriptでこれを実行したい場合は...

$("input").keydown(function(e) { 
    var pv=$(this).val(); 
    var field=this; 
    setTimeout(function() { 
    if(field.value.indexOf('+') !== 0) { 
     $(field).val(pv); 
    } 
}, 1); 
});