Demo

Question

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

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'));
});

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

Answer 2

您应该使用color属性并使用占位符属性作为默认值。

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

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

您可能只想在焦点处理时将其设置为样式。

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

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

Answer 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

JQuery：仅为输入值添加颜色样式（jsfiddle）

4 个答案:

Demo