テキストボックスの値をチェックするリアルタイムイベントを作成できるかどうかを知りたいです。つまり、テキストボックスが空の場合、ボタンはクリックできません。コードでこれを行うための検証以外に、とにかくあると思いますか?
これまでのところ、ここで立ち往生しています:
if (YourName.Text = null)
{
SubmitButton.Enabled = "False";
}
Yourname はテキストボックスで、SubmitButton はボタンです :)
System.String
IsNullOrEmpty
は、とという 1 組の便利な関数を提供しIsNullOrWhiteSpace
ます。エンド ユーザーには空に見えるあらゆる種類の文字列をテストするために使用できます。
if (string.IsNullOrWhiteSpace(YourName.Text)) {
SubmitButton.Enabled = false; // <<== No double-quotes around false
} else {
// Don't forget to re-enable the button
SubmitButton.Enabled = true;
}
これにより、完全に空白文字で構成される文字列の場合でもボタンが無効になります。これは、名前を検証するときに意味があります。
上記は同じです
SubmitButton.Enabled = !string.IsNullOrWhiteSpace(YourName.Text);
の付いたバージョンよりも短いものif
。
SubmitButton.Enabled = YourName.Text.Length > 0;
さて、ボタンを無効にして始めましょう。TextChanged イベントをテキスト ボックスに追加します。毎回、文字列が空かどうかを確認します (TextChanged イベント ハンドラーで @dasblinkenlight のコードを使用します。
これは、古い学校の JavaScript アプローチです。jquery を使用することもできますが、これだけを行いたい場合はやり過ぎです。以下のコードではoninput
、キーボードまたはマウス/タップのいずれかによってテキストが変更されたときにイベントが発生します (すべてをキャプチャする必要があります。これで自動的に実行されます)。次に、javascript はテキストボックスの内容を取得し、前後の空白を削除し、送信ボタンの無効属性をテキストボックスが空であるのと等しくなるように設定し、.length == 0
.
注: 空白のみのテキストを無効にしたくない場合は、trim() メソッドの呼び出しを削除するように変更submit.disabled = (tb.value.trim().length == 0);
してください。submit.disabled = (tb.value.length == 0);
trim() メソッドは、前後の空白を取り除きます。
このアプローチにより、送信ボタンを有効または無効にするためのポストバックが不要になります。
<!doctype html>
<!-- tested in firefox -->
<html>
<head>
<title>Demo</title>
<script type="text/javascript">
var enableInput = function() {
var tb = document.getElementById("text_box");
var submit = document.getElementById("submit");
submit.disabled = (tb.value.trim().length == 0);
};
</script>
</head>
<body>
<form>
<input type="text" id="text_box" name="test" oninput="enableInput();"></input><br/>
<input id="submit" type="submit"></input>
</form>
</body>
</html>