mutipleフォームフィールドにonblurイベントを使用する

onblurイベントを使用してフォームフィールドに書式設定を適用する簡単な関数があります。フィールドに7文字を入力すると、フィールドの境界線が緑色に変わります。赤い枠線では7文字未満です。私は、ユーザーのタブを介して個別に各フォームフィールドに関数を適用できるようにしたいと思います。現在、最初のフォームフィールドに入力すると、両方のフォームフィールドが同時にフォーマットされます。答えは、入力を繰り返し実行するforループを使用していると思います。私はそれを反映するためにコードを更新する方法を知りません。どんな助けでも大歓迎です。mutipleフォームフィールドにonblurイベントを使用する

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 
function charCount() { 
var char = document.getElementById("numb").value.toString().length 
if (char == 7) { 
    $("input").addClass("green").removeClass("red"); 
} else { 
$("input").addClass("red").removeClass("green"); 
} 
} 
</script> 

<style> 
.green {border-color:#009900;} 
.red {border-color:#990000;} 
</style> 
</head> 

<body> 
<p>Please input ID numbers:</p> 
<input id="numb" maxlength = 7 onblur="charCount()"> 
<input id="numb" maxlength = 7 onblur="charCount()"> 

</body> 
</html>

出典

2017-01-15 lezzelz

は1 .-あなたは、複数の入力のための同じIDを持っていないでき。代わりにクラスを使用してください。

2.-次に、「this」を使用して、使用されている入力の参照を取得してくださいここでは動作する解決策があります。それが役に立てば幸い！

$(".numb").blur(function(){ var char = $(this).val().length; if (char == 7) { $(this).addClass("green").removeClass("red"); } else { $(this).addClass("red").removeClass("green"); } });

.green {border-color:#009900;} .red {border-color:#990000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <p>Please input ID numbers:</p> <input class="numb" maxlength = 7> <input class="numb" maxlength = 7>

出典

2017-01-15 19:34:46 HenryDev

これは素晴らしい、完璧です。そして、はい、私はルール＃1を壊して少し恥ずかしい。助けてくれてありがとう。 – lezzelz

いくつかのポイントメイト：

まず最初に、要素が1つのHTML文書内の同じidを持つべきではありません。同じクラスを持つことはできますが、IDはできません。
document.getElementById("numb").value.toString().lengthこのステートメントを使用してユーザーからの入力を検索しようとしています。これにより、常に特定のアイテムから値が選択されます。イベントハンドラで$(this)を使用してください（jqueryを使用していて、それを行う方法を知っていると仮定します）
$("input").addClassこれを使用して、文書内のすべての入力要素を対象としています。あなたが目標としたいものに特化してください。

はこのようにそれを実行します。 HTML：

<input class="numb" maxlength = 7 onblur="charCount()"> 
<input class="numb" maxlength = 7 onblur="charCount()">

JS：

$('.numb').on('blur', function() { 
    // you access the current input elem with $(this) 
    var inputElem = $(this); 
    var char = inputElem.val().length; 
    if (char == 7) { 
     inputElem.addClass("green").removeClass("red"); 
    } else { 
     inputElem.addClass("red").removeClass("green"); 
    } 
});

出典

2017-01-15 19:53:16

ありがとう@Yogesh！うわー、私はIDを二度使用したとは信じられませんが、私はそれが間違っていることを知っています。。。私はあまりにも長い間、コードを見ていたと思う。感謝します！ – lezzelz

あなたのコード内の問題がいくつかあります：

1）あなたはこのセレクタを使用$("input")特定の入力ではなく、すべての入力にクラスを適用しています。ぼかしている特定の入力をターゲットとするセレクタを作成する必要があります。

$("input").addClass("green").removeClass("red");

2）両方の入力要素

<input id="numb" maxlength = 7 onblur="charCount()"> 
<input id="numb" maxlength = 7 onblur="charCount()">

3に同じIDを使用している）は、問題を引き起こす可能性がJavaScriptとjQueryのバニラのセレクタを混合され、それはのための1つまたは他を使用することをお勧めしますあなたの明快さ。

バージョン：これは、あなたがすでに思い付いたものに少なくとも変更を加えたバージョンですが、イベントを添付した方法は非常に非効率的です。

<script> 
function charCount(num) { 
var elem = $("#numb" + num); 
var char = elem.value.toString().length; 

if (char == 7) { 
    $(elem).addClass("green").removeClass("red"); 
} else { 
    $(elem).addClass("red").removeClass("green"); 
} 
} 
</script> 

<style> 
.green {border-color:#009900;} 
.red {border-color:#990000;} 
</style> 
</head> 

<body> 
<p>Please input ID numbers:</p> 
<input id="numb1" maxlength = 7 onblur="charCount(1)"> 
<input id="numb2" maxlength = 7 onblur="charCount(2)">

BETTER VERSION：

<html> 
</head> 
<script> 
function init() { 
    $('input').on('blur', function() { 
     var elem = $(this); 
     if(elem.val().length < 7) { 
     elem.addClass('red').removeClass('green'); 
     } 
     else { 
     elem.removeClass('red').addClass('green'); 
     } 
    }); 
} 
$(document).ready(init); 
</script> 
<style> 
.green {border-color:#009900;} 
.red {border-color:#990000;} 
</style> 
</head> 
<body> 
<p>Please input ID numbers:</p> 
<input maxlength = 7> 
<input maxlength = 7> 
</body> 
</html>

イベントよりよい解決策がIIFEsを使用することです。

私はあなたのイベント処理を学ぶためにいくつかのリソースを経ることをお勧め： https://learn.jquery.com/events/handling-events/ https://api.jquery.com/category/events/ http://gregfranko.com/blog/jquery-best-practices/

はそれが役に立てば幸い！

出典

2017-01-15 20:24:23 poushy

mutipleフォームフィールドにonblurイベントを使用する

答えて

関連する問題