javascriptの入力で最小長未満を入力しているときに通知する方法

bugfix> javascript > 投稿

値の長さが3文字未満の場合は入力の下の境界線の色を赤にし、3文字を超える場合は緑にしようとしています

function pclck1() {
  "use strict";
  var x = document.getElementById("fname").value;
  if (x.length >= 2) {
    document.getElementById("fname").style.borderBottomColor = "#0d0";
  } else {
    document.getElementById("fname").style.borderBottomColor = "#f00";
  }
}


<input id="fname" type="text" placeholder="Type Here!" onkeypress="pclck1()">

入力中に動作している、 しかし、バックスペースを使用して、値の長さが2文字または1文字になるか、空になるまで文字を削除すると、境界線の下部は緑色のままです。

javascript

html

css

回答 3 件

  • これを試して。

    イベント onkeypress を変更しました   onkeyup へ 。両方とも、 onkeypress という点で異なります  キーを押すと機能します。しかし、 onkeyup  を押してからキーを離すと機能します

    function pclck1() {
    "use strict";
    var x = document.getElementById("fname").value;
    if (x.length >= 3) {
        document.getElementById("fname").style.borderBottomColor = "#0d0";
    } else {
        document.getElementById("fname").style.borderBottomColor = "#f00";
    }
}


    <input id="fname" type="text" placeholder="Type Here!" onkeyup="pclck1()">

  • Change onkeypress="pclck1()" to oninput="pclck1()" – NewToJS

    効いた!! 

    function pclck1() {
    "use strict";
    var x = document.getElementById("fname").value;
    if (x.length < 3) {
    document.getElementById("fname").style.borderBottomColor = "#f00";
    } else {
        document.getElementById("fname").style.borderBottomColor = "#0d0";
    }
}


    <input id="fname" type="text" placeholder="Type Here!" oninput="pclck1()">

    NewToJSありがとう

  • ここでJavaScriptを記述する必要はまったくありません。 :invalid を使用して、純粋なCSSでこれを行うことができます  疑似クラスと pattern  属性。

    input { border-bottom-color: green; }
input:invalid { border-bottom-color: red; }


    <input id="fname" type="text" placeholder="Type Here!" pattern=".{3,}" required>

あなたの答え

関連記事