JQuery：僅向輸入值添加顏色樣式（jsfiddle）

如何將顏色樣式添加到此輸入元素的值（例如，紅色），同時保留輸入文本的顏色爲黑色？如果可能的話，我想將它注入到外部腳本中，而不是嵌入到輸入元素中。謝謝！JQuery：僅向輸入值添加顏色樣式（jsfiddle）

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

來源

2013-07-13 user2441996

這是你想要的嗎？

$(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-13 18:42:53

完美的作品，謝謝！ – user2441996

你應該使用的顏色屬性，並使用佔位符屬性的默認值。

<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-13 18:43:29

這是什麼想要的？

$(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-13 18:46:35 Affy

你的意思是這樣嗎？

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

來源

2013-07-13 18:53:08 iConnor

JQuery：僅向輸入值添加顏色樣式（jsfiddle）

回答

Demo

相關問題