0

ユーザーの入力に応じて、div コンテンツの表示と非表示を切り替えようとしています。

ここに私のコードがあります：

<input type="text" name="pass" id="pass" onkeyup="check_input(this.value)">

<div id="repeated_pattern" style="display:none">
    <b>REPEATED PATTERN</b>
    <p>Repeated characters</p>
</div>

<script>
function check_input(value){
     //this would check if there are 3 or more characters repeated consecutively
     var repeat_pattern = /(.)\1\1/.test(value);  

     if(repeat_pattern)  { 
        $("#repeated_pattern").show(500); 
     }else{ 
        $("#repeated_pattern").hide(500); 
     }
}    
</script>

テスト:

  1. 入力しようとするggと、divの内容が表示されなかったので、結果は問題ありません
  2. 入力しようとするgggと、divの内容が表示されるので、結果は問題ありません
  3. しかし、私がgそれを削除しようとすると、今はgg. divの内容は非表示にする必要がありますが、それでも表示されているはずです。onkeyup機能が正常に動作していませんhide()。

onkeyup で hide() を使用する方法、またはその逆の方法は?

4

1 に答える 1

1

次のエラーが表示されます。

ReferenceError: check_input is not defined

スコープ内に収まるように、Javascript でイベント ハンドラーを設定してみてください。

http://jsfiddle.net/vHREF/1/

Javascript:

// Event handlers
if(document.addEventListener)
document.getElementById('pass').addEventListener('keyup',check_input,false);
// Good old Internet Explorer event handling code
if(document.attachEvent)
document.getElementById('pass').attachEvent('keyup',check_input);

function check_input() {
    var value = $(this).val();
    //this would check if there are 3 or more characters repeated consecutively
    var repeat_pattern = /(.)\1\1/.test(value);

    if (repeat_pattern) {
        $("#repeated_pattern").show(500);
    } else {
        $("#repeated_pattern").hide(500);
    }
}

HTML:

I'm trying to show and hide div contents depends on the input of the user. Here are my codes:
<input type="text" name="pass" id="pass">
<div id="repeated_pattern" style="display:none"> <b>REPEATED PATTERN</b>

    <p>Repeated characters</p>
</div>
于 2013-03-29T03:22:04.680 に答える