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文字になるか、空になるまで文字を削除すると、境界線の下部は緑色のままです。

回答 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>
    
    

あなたの答え