0

JavaScriptでデフォルト値が追加された入力フィールドがあります

<input type="text" class="input-text required-entry validate-value-eg" id="city_field" name="city" onfocus="if(this.value=='e.g. Bristol, Yorkshire') this.value='';" onblur="if(this.value=='') this.value='e.g. Bristol, Yorkshire';" value="e.g. Bristol, Yorkshire">

訪問者がこのフィールドをクリックするたびに、デフォルト値が消えて、他の値に置き換えられない場合は復元されます。

私が達成しようとしているのは、値がデフォルトから変更された場合にのみクラスを追加することです。

どんな助けでも大歓迎です、

ありがとう

ドム

4

3 に答える 3

2

スクリプトセクションまたは別の.jsファイルでイベントを定義することをお勧めします。

.change()イベントでそれを処理する必要はありません。.blur()イベント自体で確認できます。

HTML

    <input type="text" class="input-text required-entry validate-value-eg" 
           id="city_field" name="city" value="e.g. Bristol, Yorkshire">

純粋なJavascript

var elem = document.getElementById('city_field');

elem.addEventListener('focus', function() {
    if (this.value == 'e.g. Bristol, Yorkshire') {
        this.value = '';
    }
});

elem.addEventListener('blur', function() {
    if (this.value == 'e.g. Bristol, Yorkshire') {
        RemoveClass(this, "newClass")
    }
    else if (this.value == '') {
        this.value = 'e.g. Bristol, Yorkshire';
        RemoveClass(this, "newClass")
    }
    else {
        this.className += " newClass";
    }
});

function RemoveClass(elem, newClass) {
    elem.className = elem.className.replace(/(?:^|\s)newClass(?!\S)/g, '')
}​

Javascriptフィドル

ただし、他のjavascriptフレームワークを使用することで、損失の少ないコードでこれを実現できます。これはあなたの人生をずっと楽にしてくれるでしょうが、あなたがjavascriptから始めればそれは常に良いことです。

jQuery

$(function() {
    var $elem = $('#city_field');

    $elem.val('e.g.Bristol, Yorkshire'); // Default value
    $elem.on('focus', function() { // Focus event
        if (this.value == 'e.g.Bristol, Yorkshire') {
            this.value = '';
        }
    });
    $elem.on('blur', function() { // Focus event
        if (this.value == 'e.g.Bristol, Yorkshire') {
            $(this).removeClass("newClass");
        }
        else if (this.value == '') {
            this.value = 'e.g.Bristol, Yorkshire';
            $(this).removeClass("newClass");
        }
        else {
            $(this).addClass("newClass");
        }
    });
});​

jQueryフィドル

于 2012-11-20T17:09:14.407 に答える
1

入力に ​​onchange ハンドラーを追加する

<input type="text" class="input-text required-entry validate-value-eg" 
    id="city_field" name="city" 
    onchange="addClass(this)" 
    onfocus="if(this.value=='e.g. Bristol, Yorkshire') this.value='';" 
    onblur="if(this.value=='') this.value='e.g. Bristol, Yorkshire';" 
    value="e.g. Bristol, Yorkshire">


<script>
 function addClass(input) // 'this' in onChange argument is the input element
 {
     if( input.value=='e.g. Bristol, Yorkshire')
     {
        $(input).removeClass("not_default_input_class");
        $(input).addClass("default_input_class");
     }
     else 
     {
        $(input).removeClass("default_input_class");
        $(input).addClass("not_default_input_class");
     }
 }
</script>

編集: CSS クラスを追加/削除するための jQuery の使用を追加

于 2012-11-20T16:36:01.183 に答える
0 
 <script>
 function addClass(input) // 'this' in onChange argument is the input element
{
 input.className = input.value==input.defaultValue? 
     "default_input_class" : "not_default_input_class"
}
</script>
于 2012-11-20T16:45:58.000 に答える