JQuery：仅向输入值添加颜色样式（jsfiddle）答案

【问题标题】：JQuery: adding color style to input value only (jsfiddle)JQuery：仅向输入值添加颜色样式（jsfiddle）
【发布时间】：2013-07-13 18:35:58
【问题描述】：

如何将颜色样式仅添加到此输入元素的值（例如红色），同时保留输入文本的颜色为黑色？如果可能的话，我想将其注入外部脚本而不是将其嵌入到输入元素中！谢谢！

http://jsfiddle.net/6KbqK/

HTML

<input type="text" value="Search apples" class="noquery" />

JQuery

$('input.noquery').on('focus',function(){
    if (!$(this).data('defaultText'))
        $(this).data('defaultText',$(this).val());
    if ($(this).val()==$(this).data('defaultText'))
        $(this).val('');
});
$('input.noquery').on('blur',function(){
    if ($(this).val()=='')
        $(this).val($(this).data('defaultText'));
});

【问题讨论】：

标签： jquery input

【解决方案1】：

这是你想要的吗？

$(document).ready(function(){
    $('input.noquery').on('focus',function(){
        if (!$(this).data('defaultText')) {
            $(this).data('defaultText',$(this).val());
            $(this).addClass("watermark");
        }
        if ($(this).val()==$(this).data('defaultText')) {
            $(this).removeClass("watermark");
            $(this).val('');
            }
        });
    $('input.noquery').on('blur',function(){
        if ($(this).val()=='')
        {
            $(this).val($(this).data('defaultText'));
            $(this).addClass("watermark");
        }
        });
    });

小提琴： http://jsfiddle.net/6KbqK/1/

【讨论】：

【解决方案2】：

您可能应该使用 color 属性并使用 placeholder 属性作为默认值。

<style> input { color: red; } </style>
<input placeholder="Bill" name="name">

这是一个演示，包括样式占位符文本：http://jsbin.com/uqusut/1/edit

当它有焦点时，您可能还想简单地设置它的样式。

input { color: blue; }
input:focus { color: red; }

【讨论】：

【解决方案3】：

这是想要的吗？

$(document).ready(function(){
    $('input.noquery').on('focus',function(){
        if
            (!$(this).data('defaultText'))
            $(this).data('defaultText',$(this).val());
            $(this).addClass('red');
        if
            ($(this).val()==$(this).data('defaultText'))
            $(this).val('');
        });
    $('input.noquery').on('blur',function(){
            if (($(this).val()=='')) {
                $(this).val($(this).data('defaultText'));
                $(this).removeClass('red');
                $(this).addClass('black');
            }
        });
    });

CSS：

.red { color: red; }
.default { color: black; }

http://jsfiddle.net/6KbqK/3/

【讨论】：

【解决方案4】：

你的意思是这样的？

http://jsfiddle.net/6KbqK/5/

你还应该缓存你的元素，它会提高性能

$(document).ready(function(){
    $('input.noquery').on('focus',function(){
        if
            (!$(this).data('defaultText'))
            $(this).data('defaultText',$(this).val());
        if
            ($(this).val()==$(this).data('defaultText'))
            $(this).css('color', 'black').val('');
        });
    $('input.noquery').on('blur',function(){
        if
            ($(this).val()=='')
            $(this).css('color', 'red').val($(this).data('defaultText'));
        });
    });

CSS

input{
    color:red;
}

我所做的只是将默认的 CSS 颜色设置为红色。然后，当您将值更改为 '' 时，将颜色更改为黑色，然后当您将其更改回默认值时，将其更改回红色

如果您需要相反的方式

Demo

【讨论】：