デフォルトでは、入力フィールドの値があり、そこに何を入力するかをユーザーに指示します(たとえば、アカウント番号を入力します)。クリックすると値が非表示になり、クリックすると再び表示されるスクリプトがあります。
ただし、このフィールドは必須ではありません。ユーザーがフィールドに情報を入力しない場合、デフォルト値が送信され、数字のみが許可されるためエラーが発生します。ユーザーが自分のアカウント番号を入力しない場合、このデフォルト値をゼロに変更するにはどうすればよいですか?
デフォルトでは、入力フィールドの値があり、そこに何を入力するかをユーザーに指示します(たとえば、アカウント番号を入力します)。クリックすると値が非表示になり、クリックすると再び表示されるスクリプトがあります。
ただし、このフィールドは必須ではありません。ユーザーがフィールドに情報を入力しない場合、デフォルト値が送信され、数字のみが許可されるためエラーが発生します。ユーザーが自分のアカウント番号を入力しない場合、このデフォルト値をゼロに変更するにはどうすればよいですか?
デフォルト値を使用しないでください。プレースホルダーを使用します。
<input type="text" placeholder="Real Name">
または、サーバー側でこれらの値を無視します。
if ($_POST["realname"] == "Real Name") { real_name_not_provided(); }
それでも JavaScript の使用を主張する場合 (ブラウザのサポートを向上させるため) は、次のようなものを使用できます。
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form').submit(function () {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
}
});
この記事からの引用 (ちなみにこれは Google で最初に公開されたものです) . このコードを使用する前に記事をお読みください。記事からさらに多くのコードが必要になる場合があります。
HTML5プレースホルダー属性をサポートするブラウザーで使用する必要があります。
本当の答えは、検証コードがデフォルトのテキストを無視するほど賢くないのはなぜですか?
次のように、フォーム投稿の前に入力を検証できます。
マークアップ:
<input type="text" id="txtAcc" name="txtAcc" value="Enter your account number..." />
<input type="button" id="btnSubmit" name="btnSubmit" onclick="validate();" value="Submit" />
Javascript:
// Validate input before form post
function validate(){
var txtAcc = document.getElementById("txtAcc");
var accNum = parseInt(txtAcc.value);
if (!accNum || txtAcc.value == "Enter your account number..."){
// Set default Account number
txtAcc.value = 0;
}
}