テキストフィールドの長さが定義された数より大きい場合に警告を表示する方法

Question

私はプログラミングの新しいビーイングです。定義した数の範囲内で値を入力する方法を制限するコードを作成しました。

フィールド値を35文字または長さ以下で入力します。ここで

は、私の書いたコードですが、それは私が方法論をonkeyupの使用

が動作していないです

function handleChange() { 
 
    var x = document.getElementById("fname"); 
 
    var y = document.getElementById("lname"); 
 
    if ((x.value > 35) || (y.value > 35)) 
 
    { 
 
     alert("value should less than 35"); 
 
    } 
 
    }

<form onkeyup="handleChange()"> 
 
    Enter your fname: <input type="text" id="fname"> 
 
    Enter your lname: <input type="text" id="lname"> 
 
</form>

Answer 1

は次のようになります。

if ((x.value.length > 35) || (y.value.length > 35)) 

Answer 2

あなたはどちらかそれを行うことができますmaxlength属性を持つHTMLから.. so yo handleChange関数は必要ありません。ユーザーは単に設定された文字数に制限されます。詳細：https://www.w3schools.com/tags/att_input_maxlength.asp

<input type="text" id="fname" maxlength="35"> 
<input type="text" id="lname" maxlength="35"> 

か何をやろうとしているが、.LENGTH

を追加しました..だから

if ((x.value.length > 35) || (y.value.length > 35)) 
{ 
    alert("value should less than 35"); 
} 

Answer 3

<form action="/action_page.php"> 
    Username: <input onkeydown="handleChange()" id="fname" type="text" name="usrname" maxlength="36"><br> 
    Username: <input onkeydown="handleChange()" id="lname" type="text" name="usrname" maxlength="36"><br> 
    <input type="submit" value="Submit"> 
</form> 


<script> 
function handleChange() { 
    var x = document.getElementById("fname").value; 
    var y = document.getElementById("lname").value; 
    console.log(x); 
    if ((x.length > 35) || (y.length > 35)) 
    { 
     alert("value should less than 35"); 
    } 
    } 
</script> 

Answer 4

<form onkeyup="handleChange()"> 
Enter your fname: <input type="text" maxlength="35" id="fname"> 
Enter your lname: <input type="text" maxlength="35" id="lname"> 
</form> 
<script> 
function handleChange() { 
    var x = document.getElementById("fname"); 
    var y = document.getElementById("lname"); 
    if ((x.value.length > 34) || (y.value.length > 34)) 
    { 
     alert("value should less than 35"); 
    } 
    } 
</script>