2017-03-08 6 views
1

ユーザーが特定の単語を入力すると、下のテキストフィールドが自動的に無効になるフォーム用のJavaScriptをコーディングしてみました。問題は、jsfiddleでコードを実行しようとすると問題が発生します。スムーズに私のプロジェクトでそれを使用すると、それは動作しません。 誰でも私のコードに何が間違っているか説明できますか?Javascript:テキストフィールドを無効にする

<script> 
function matchWord(e){ 
if(document.getElementById('uname').value.trim === 'Unknown' || document.getElementById('uname').value.trim === 'unknown'){ 
    document.getElementById('pword').disabled = true; 
    document.getElementById('response').disabled = true; 
    alert('you enter bannned name in the field'); 
} 
else{ 
} 
} 
document.getElementById('uname').onkeyup = matchWord(); 
</script> 

<html> 
    <body> 
     Name:<input type="text" name="uname" id="uname" placeholder="Username"><br> 
     password:<input type="password" name='pword' id='pword' placeholder="password"><br> 
     Responsibility:<select id = "response"> 
        <option>---Responsibility---</option> 
         </select> 
    </body> 
</html> 
+1

タイプミス: '関数matchWord'(キャメルケース)' = matchword対'(小文字)。 –

+0

ちょうどそれを修正するが、それでも動作しません。 – Nexz

+1

あなたのブラウザのdevtoolsでエラーが見つかりましたか?可能なことは、「[なぜjQueryやgetElementByIdのようなDOMメソッドが要素を見つけられないのですか?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method -such-as-getelementbyid-not-find-the-element) " –

答えて

0
Below code works fine for me in all browsers 

<html> 
    <body> 
     Name:<input type="text" name="uname" id="uname" placeholder="Username"><br> 
     password:<input type="password" name='pword' id='pword' placeholder="password"><br> 
     Responsibility:<select id = "response"> 
        <option>---Responsibility---</option> 
         </select> 
    </body> 
    <script> 
function matchWord(e){ 
if(document.getElementById('uname').value.trim() === 'Unknown' || document.getElementById('uname').value.trim() === 'unknown'){ 
    document.getElementById('pword').disabled = true; 
    document.getElementById('response').disabled = true; 
    alert('you enter bannned name in the field'); 
} 
else{ 
} 
} 
document.getElementById('uname').addEventListener("keyup", function(evt) { 
     matchWord(evt); 
    }, false); 
</script> 
</html> 
+3

ヒント:少なくともスニペットと一緒に簡単な説明を入れてください。スニペットとは何が違うのか、なぜリビジョンが必要だと思うのかを詳しく説明してください。 –

+0

ありがとう、あなたのコードは私のために働く。 – Nexz

1

KeyUpイベントのeventhanlderとして、関数の結果を設定し、その関数自体を設定します。

試してみてください。

document.getElementById('uname').onkeyup = matchWord; 
代わり

、または要素自体にイベントハンドラを追加し、前の行を削除して追加:

<input type="text" name="uname" id="uname" placeholder="Username" onkeyup="matchWord()"> 
2

問題1:誤植matchword()、と交換してくださいmatchWord();

問題2:トリムは方法です!代わりにdocument.getElementById('uname').value.trim()を使用してください。

2

まずtrim()

function matchWord(e) { 
 
    if (document.getElementById('uname').value.trim() === 'Unknown' || document.getElementById('uname').value.trim() === 'unknown') { 
 
    document.getElementById('pword').disabled = true; 
 
    document.getElementById('response').disabled = true; 
 
    alert('you enter bannned name in the field'); 
 
    } 
 
}
Name: 
 
<input type="text" name="uname" id="uname" placeholder="Username" onkeyup="matchWord()"> 
 
<br> password: 
 
<input type="password" name='pword' id='pword' placeholder="password"> 
 
<br> Responsibility: 
 
<select id="response"> 
 
    <option>---Responsibility---</option> 
 
</select>
は、プロパティ、その方法ではありません。したがって、 trimから trim()に変更する必要があります。

第2onkeyupに機能を割り当て、機能を呼び出す必要はありません。

function matchWord(e) { 
 
    if (document.getElementById('uname').value.trim() === 'Unknown' || document.getElementById('uname').value.trim === 'unknown') { 
 
     document.getElementById('pword').disabled = true; 
 
     document.getElementById('response').disabled = true; 
 
     alert('you enter bannned name in the field'); 
 
    } else {} 
 
} 
 
document.getElementById('uname').onkeyup = matchWord;
Name:<input type="text" name="uname" id="uname" placeholder="Username"><br> 
 
password:<input type="password" name='pword' id='pword' placeholder="password"><br> 
 
Responsibility: 
 
<select id = "response"> 
 
<option>---Responsibility---</option> 
 
</select>

1

あなたが提供されているサンプルのいくつかのエラーがあります。

  • まずオフ、名前は大文字と小文字が区別されるので、matchWordmatchwordと同じではありません。注意してください!
  • 第2に、戻り値ではなく、関数自体をイベントに割り当てるには、document.getElementById('uname').onkeyup = matchWord;を使用する必要があります。
  • 最後に、trim()の代わりにtrimを使用すると、メソッドのロジックが間違っています。これは、前述した正反対の間違いであり、値の代わりに関数を返します。次のコードは動作します:

function matchWord(e) { 
 
    if (document.getElementById('uname').value.trim() === 'Unknown' || 
 
    document.getElementById('uname').value.trim() === 'unknown') { 
 
    document.getElementById('pword').disabled = true; 
 
    document.getElementById('response').disabled = true; 
 
    alert('you enter bannned name in the field'); 
 
    } else {} 
 
} 
 

 
document.getElementById('uname').onkeyup = matchWord;
Name:<input type="text" name="uname" id="uname" placeholder="Username"><br> password: 
 
<input type="password" name='pword' id='pword' placeholder="password"><br> Responsibility: 
 
<select id="response"> 
 
<option>---Responsibility---</option> 
 
</select>

+0

がまだ失敗した、私は問題が私のブラウザからだと思う。まだありがたいことです。 – Nexz

+0

@Nexzあなたはどのブラウザにいますか?これは、現代的なブラウザで完璧に正常に動作するはずです... –

+0

それは大丈夫です、私は以下の答えを見つけました。しかし、私はchromeとfirefox.thanksの両方を使用しています。 – Nexz

0

入れ:

<script> // stuff </script> 

に:

<html> // here </script> 
関連する問題