jquery - Jquery:値がページのロード時と同じ場合、送信ボタンが押されたときに値を削除します

Question

Jqueryを使用してページがロードされたときと同じ値を持つ各入力のフィールド値を削除するにはどうすればよいですか?

ロジックの例: 読み込み時に変数を各入力値と等しく設定する 送信ボタンをマウスで押したときに、値がまだその変数と一致する場合は値を削除します。

まだjQueryは初めてです。助けてくれてありがとう:)

Answer 1

私が使用する方法は、カスタムHTML属性を設定することです。たとえば、次のようになります。

<input name="foo" value="test" data-default="test" />

次に、ユーザーがフォームを送信すると、フォームの値がデフォルト値と比較されます。それらが同じである場合は、リセットします。それで：

$(document).ready(function() {
    $('form').submit(function() {
        $(this).find('input').each(function() { 
            if($(this).val() == $(this).attr('data-default')) $(this).val('');
        });
    });
});

それがあなたを助けることを願っています。

Answer 2

すべての入力フィールドに onChange イベントを追加して、どのフィールドが変更されたかを追跡します。

デフォルトを別の属性に保存すると、ページ読み込み時間が長くなり、すべてのデータが複製されます。多分あなたのデータはかなりのものです。その場合は、変更に注意してください。

例：

var untouched_fields = []
$(document).ready(function() {
   $('#form input').each(function() { untouched_fields.push( $(this).attr("id") ) }
   $('#form input').on("change", function() { untouched_fields.remove( $(this).attr("id") ) })
})

..次に、送信時に untouched_fields を読み取ります。

Answer 3

まず、ブラウザーがプレースホルダーをサポートしている場合は、機能の代わりにプレースホルダーを使用してください。次に、プレースホルダーがサポートされていない場合は、最初にそれに応じて入力を更新し、送信時にその変更を元に戻します。

HTML :

<input name="first-name" placeholder="First Name" />

JavaScript :

// before all of your code
jQuery.support.placeholder = (function(){
    var i = document.createElement('input');
    return 'placeholder' in i;
})();

// in document ready
if (!$.support.placeholder) {
    // update value of empty inputs to the value of the placeholder attribute if set.
    $("input[placeholder]").val(function(i,val) {
        return val == "" ? $(this).attr("placeholder") || "" : val;
    }).focus(function(){
        if (this.value == $(this).attr("placeholder")) {
            this.value = "";
        }
    }).blur(function(){
        if (this.value == "") {
            this.value = $(this).attr("placeholder");
        }
    });
}


$('form').submit(function() {
    if (!$.support.placeholder) {
        $("input[placeholder]",this).val(function(i,val) {
            return val == $(this).attr("placeholder") ? "" : val;
        });
    }
});

私自身のコードでは、実際には入力の後ろにラベルを配置し、入力の値に触れる代わりに表示/非表示にします。