0

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

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

4 回答 4

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/

于 2013-07-13T18:42:53.220 回答
1

您可能应该使用 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; }
于 2013-07-13T18:43:29.193 回答
0

这是想要的吗？

$(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/

于 2013-07-13T18:46:35.410 回答
0

你的意思是这样吗？

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 颜色设置为红色。然后当您更改值以  ''将颜色更改为黑色然后将其更改回默认值时将其更改回红色

 如果你需要相反的方式

演示

于 2013-07-13T18:53:08.473 回答