値の長さが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 件
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>
関連した質問
- 1つにカーソルを合わせると、別のCSSに影響します
- CSS:ぼやけたdiv内のぼやけたdivの問題
- 純粋なCSSオーバーレイスクロール
- 水平ナビゲーションバーのドロップダウンメニューの配置関連の問題
- ブートストラップドロップダウン-メニューが開かない
- HTML/CSS + JS(Datatables)で2つの列を1つにマージしてテーブルを表示する
- ページの下部にいるときにドロップダウンボタンに触れると、フッターを持ち上げるスティッキーナビゲーションバー
- ボックスシャドウインセットと通常のdivを持つ方法はありますか
- HTMLとJavaScriptを使用してコピーボタンを作成するにはどうすればよいですか?
- JavaScript onclick画像を変更し、カウンターを増やします
これを試して。
イベント
onkeypress
を変更しましたonkeyup
へ 。両方とも、onkeypress
という点で異なります キーを押すと機能します。しかし、onkeyup
を押してからキーを離すと機能します