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

Adding class to input when default value changed

提问by Dom

I have an input field that has a default value added with JavaScript

我有一个使用 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">

Whenever visitor click on this field the default value will dissipated and restore if not replaced by other value.

每当访问者单击此字段时，默认值将消散并恢复（如果未被其他值替换）。

What I am trying to achieve is to add a class only if value has been changed from default?

我想要实现的是仅当值已从默认值更改时添加一个类？

Any help much appreciated,

非常感谢任何帮助，

Thanks

谢谢

Dom

多姆

回答by Sushanth --

It is always a better practice to define your events in the script section or a separate .js file.

在脚本部分或单独的 .js 文件中定义事件总是更好的做法。

You don't need to handle that in a .change()event . You can check that in the .blur()event itself..

您不需要在.change()event 中处理它。您可以在.blur()事件本身中检查。

HTML

HTML

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

Pure Javascript

纯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 小提琴

But you can achieve this with a loss lesser code by using other javascript frameworks. This will make your life a lot easier but it is always good if you start out with javascript.

但是您可以通过使用其他 javascript 框架以更少的代码实现这一点。这将使您的生活更轻松，但如果您从 javascript 开始，它总是好的。

jQuery

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

jQuery 小提琴

回答by mrk

Add an onchange handler to your input

将 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>

EDIT: Added use of jQuery to add/remove the CSS classes

编辑：添加了使用 jQuery 添加/删除 CSS 类

回答by Vinoth Kumar

 <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>