javascript - 当存在两个类时，清除输入值不起作用

Question

好的，我正在使用此代码清除输入，效果很好！只要输入没有两个类...

这是有效的

<input class="textBox" name="textBox" value="some value" >

$(document).ready(function() {
    var default_val = '';
    $('input[class^="textBox"]').focus(function() {
        if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
            $(this).data('default_val', $(this).val());
            $(this).val('');
        }
    });

    $('input[class^="textBox"]').blur(function() {
        if ($(this).val() == '') $(this).val($(this).data('default_val'));
    });
});

这是行不通的

但是如果输入变为这个

<input class="text_box textBox" name="textBox" value="some value" >

即使我将代码更改为

$(document).ready(function() {
    var default_val = '';
    $('input[class^="text_box textBox"]').focus(function() {
        if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
            $(this).data('default_val', $(this).val());
            $(this).val('');
        }
    });

    $('input[class^="text_box textBox"]').blur(function() {
        if ($(this).val() == '') $(this).val($(this).data('default_val'));
    });
});

这是它不起作用的输入

<input class="text_box textBox" type="text" name="email" id="email" value="Su Correo electrónico" size="22">

Answer 1

Use a class selector:

$(document).ready(function() {
    var default_val = '';
    $('input.textBox').focus(function() {
        if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
            $(this).data('default_val', $(this).val());
            $(this).val('');
        }
    });

    $('input.textBox').blur(function() {
        if ($(this).val() == '') $(this).val($(this).data('default_val'));
    });
});