javascript - 默认值更改时向输入添加类

Question

我有一个输入字段，其中使用 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">

每当访问者点击此字段时，如果不替换为其他值，默认值就会消失并恢复。

我想要实现的是仅在默认值发生更改时添加一个类？

非常感谢任何帮助，

谢谢

多姆

Answer 1

在脚本部分或单独的 .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 Fiddle

但是您可以通过使用其他 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 Fiddle