0

I have a problem. by the codes below, the value of .srch-inpt is changing according to the selected option class. Now I need to remove value of the .srch-inpt on focus and have it back on blur. the code I've written does not work properly .. I appreciate if anybody can help me with this .. thanks!

Fiddle DEMO

here's my HTML :

<select class="srchopts">
    <option class="bookopt">Book Option</option>
    <option class="articleopt">Article Option</option>
    <option class="thesisopt">Thesis Option</option>
    <option class="journalopt">Journal Option</option>
</select>
<input type="text" name="" class="srch-inpt" value="Title / Author / Keywords / ISBN" defaultValue="" />

and my jQuery code:

//Changing search value on select-box option change
$(function(){
    $('.srchopts').change(function () {
        var optclass = "";
        $("select option:selected").each(function () {
            optclass += $(this).attr('class');
        });
        if (optclass == 'bookopt' || 'thesisopt' ) {
            $('.srch-inpt').val('Title/ Author/ Keyword/ ISBN');
        }
        if (optclass == 'articleopt' ) {
            $('.srch-inpt').val('Title/ Author/ Keyword/ Doi');
        }
        if (optclass == 'journalopt' ) {
            $('.srch-inpt').val('Title/ ISSN');
        }
    });
    $('.srch-inpt').focus(function() {
        if ($(this).val() == $(this).attr('defaultValue'))
            $(this).val('');
        }).blur(function() {
            if ($(this).val() == '')
            $(this).val( $(this).attr('defaultValue') );
        });     
});
4

2 に答える 2

0

A. Wolff が言及したポイントで答えを得ました。新しいjQueryには「DefaultValue」属性がないため、自分で作成し、.srch-inpt値を変更するたびにその値を更新する必要があります。

だから、これは私の新しいjQueryコードです：

//Changing search value on select-box option change
$(function(){
    $('.srchopts').change(function () {
        var optclass = "";
        $("select option:selected").each(function () {
            optclass += $(this).attr('class');
        });
        if (optclass == 'bookopt' || 'thesisopt' ) {
            $('.srch-inpt').val('Title/ Author/ Keyword/ ISBN');
        }
        if (optclass == 'articleopt' ) {
            $('.srch-inpt').val('Title/ Author/ Keyword/ Doi');
        }
        if (optclass == 'journalopt' ) {
            $('.srch-inpt').val('Title/ ISSN');
        }

        $('.srch-inpt').attr('defaultValue', $('.srch-inpt').val());
    });
    $('.srch-inpt').focus(function() {
        if ($(this).attr('defaultValue') == '')
            $(this).attr('defaultValue', $(this).get(0).defaultValue);


        if ($(this).val() == $(this).attr('defaultValue'))
            $(this).val('');
    }).blur(function() {
        if ($(this).val() == '')
            $(this).val( $(this).attr('defaultValue') );
    });     
});

デモ

于 2013-09-16T05:33:42.730 に答える
0 
$('.srch-inpt').data('defaultValue','My default value').focus(function () {
    if (this.value === $(this).data('defaultValue')) this.value = "";
}).blur(function () {
    if (!this.value.length) this.value = $(this).data('defaultValue');
}).blur();

デモ

于 2013-09-15T16:51:39.843 に答える