jquery - フィールドが空のままの場合、Jqueryはぼかし時に元の値を返します

Question

どうすればこれを達成できますか？ユーザーがフィールドを空白のままにした場合、元の値を取得したいと思います。

これは私がこれまでに得たものです。Jsfiddleデモ

これが私のコードです

$(document).ready(function() {
    var field = $('input[type="text"]');
    field.focus(function() { //Empty the field on focus
        var thisValue = $(this).val();
        $(this).attr("value", "");
    });

    field.blur(function() { //Check the field if it is left empty
        if ($(this).val() == "") {
            //alert('This field can not be left empty');
            $(this).val(thisValue);
        }
    });
});

score 5 · Accepted Answer

基本的に、すべての主要なブラウザでネイティブにサポートされているplaceholder属性を記述しています。ただし、古いブラウザではサポートされていません。より広範なサポートを得るには、この属性のサポートをシムする必要があります。これを行う多くのオプションがオンラインにありますが、必要に応じて自分で行うこともできます。

基本的に、自分自身や他の人が標準のマークアップを使用できるようにする必要があります。

<input name="fname" placeholder="First Name">

jQueryを使用すると、属性を持つ要素のfocusand blur（またはfocusinand ）イベントに応答します。要素がフォーカスされていて、プレースホルダー値がある場合は、要素をクリアします。要素がぼやけていて空の場合は、プレースホルダー値を指定します。focusoutplaceholder

これは少し冗長ですが、ロジックに従うのに役立つコメントを追加しました。

// Written and tested with jQuery 1.8.1
(function ( $ ) {

    // Play nice with jshint.com
    "use strict";

    // Abort if browser already supports placeholder
    if ( "placeholder" in document.createElement("input") ) {
        return;
    }

    // Listen at the document level to work with late-arriving elements
    $(document)
        // Whenever blur or focus arrises from an element with a placeholder attr
        .on("blur focus", "[placeholder]", function ( event ) {
            // Determine the new value of that element
            $(this).val(function ( i, sVal ) {
                // First store a reference to it's placeholder value
                var placeholder = $(this).attr("placeholder"), newVal = sVal;
                // If the user is focusing, and the placehoder is already set
                if ( event.type === "focusin" && sVal === placeholder ) {
                    // Empty the field
                    newVal = "";
                }
                // If the user is blurring, and the value is nothing but white space
                if ( event.type === "focusout" && !sVal.replace(/\s+/g, "") ) {
                    // Set the placeholder
                    newVal = placeholder;
                }
                // Return our new value
                return newVal;
            });
        })
        // Finally, when the document has loaded and is ready
        .ready(function () {
            // Find non-autofocus placeholder elements and blur them
            // This triggers the above logic, which may provide default values
            $(":input[placeholder]:not([autofocus])").blur();
        });

}(jQuery));

この特定のシムは、基本的な機能のみを提供します。他の人は、プレースホルダー値が使用されているときにフォントの色を変更したり、入力を開始するまでプレースホルダー値を表示したままにすることをサポートする場合があります（このアプローチでは、フォーカスがすぐに削除されます）。

score 1 · Accepted Answer

プレースホルダ:

$(document).ready(function() {
    var field = $('input[type="text"]');
    field.focus(function() {
        var placeholder = $(this).data('placeholder');
        if (this.value == placeholder) 
            this.value = "";

    });

    field.blur(function() {
        if (this.value === "") {
            this.value = $(this).data('placeholder');
        }
    });
});

ライブデモ

について$(this).val()：

DOM のプロパティと機能を知る

jQuery の目標の 1 つは DOM を抽象化することですが、DOM のプロパティを知っておくと非常に役立ちます。DOM について学習せずに jQuery を学習する人が犯す最も一般的な間違いの 1 つは、要素のプロパティにアクセスするために jQuery の優れた機能を利用することです。

$('img').click(function() {
    $(this).attr('src');  // Bad! 
});

上記のコードでは、これはクリックイベントハンドラーが起動された要素を参照します。上記のコードは遅くて冗長です。以下のコードは同じように機能し、はるかに短く、高速で読みやすいです。

jQueryタグ情報

score 1 · Accepted Answer

これも非jQueryの回答です：

<input type="text" name="zip_code" id="zip_code_value" value="Name" onfocus="if(this.value=='Name'){this.value=''}" onblur="if(this.value==''){this.value='Name'}">

入力タグをそのように更新するだけで、jQuery は必要ありません。

score 0 · Accepted Answer

thisValue をグローバル変数にする必要があります。このようにして、どこからでもアクセスできるようになります。このようなもの。

$(document).ready(function() {
    var field = $('input[type="text"]');
    var thisValue
    field.focus(function() {//Empty the field on focus
        thisValue = $(this).val();
        $(this).attr("value","");
    });

    field.blur(function() {//Check the field if it is left empty
        if($(this).val()=="") {
        //alert('This field can not be left empty');
        $(this).val(thisValue);
        }
    });

score 0 · Accepted Answer

私が最近使用しているものは次のとおりです。

HTML:

<input type="text" name="s" id="s" value="Search" />
<input type="text" name="email" id="email" value="you@domain.com" />
...

JavaScript:

// Default Input Field Text
$(document).ready( function(){
    $("#s, #email, #phone, #name").live("focus", function(){
        if ( $(this).val() == $(this).attr("rel") ) $(this).val('');
    }).live("blur", function(){
        if ( $(this).val() == '' ) $(this).val( $(this).attr("rel") );
    }).each( function(){
        $(this).attr("rel", $(this).val() );
    });
});

score 0 · Accepted Answer

thisValueを削除して、グローバルスコープでを定義します。var

$(document).ready(function() {
    var field = $('input[type="text"]');
    field.focus(function() {//Empty the field on focus
         thisValue = $(this).val();
        $(this).attr("value","");
    });

    field.blur(function() {//Check the field if it is left empty
        if($(this).val()=="") {
        //alert('This field can not be left empty');
        $(this).val(thisValue);
        }
    });
});

http://jsfiddle.net/dbsNy/3/

jquery - フィールドが空のままの場合、Jqueryはぼかし時に元の値を返します

6 に答える 6

Related

Reference