DIV输入标签值改变颜色

我有我的HTML标记代码如下问题：DIV输入标签值改变颜色

<div id="searchbar"><input name="searchbar" type="text" id="searchfield" value="some text" onfocus=" 
if(this.value==this.defaultValue) 
    this.value=''; 
    this.style.color='#11111'" 
onblur=" 
if(this.value=='') 
    this.value=this.defaultValue; 
    this.style.color='#22222' 
if(this.value==this.defaultValue) 
    this.style.color='#111111'"

还行，主要目的是批准，在我searchfield其中标准值与“某个给定文字“应该只为新条目改变颜色。

消息“一些文本”将在点击消失后消失。现在，新值应该从标准＃222222更改为＃111111。其次，离开这个领域时，必须有两种不同的方式来看待。第一种可能性应该是，如果新值与具有“一些文本”的标准值不同，则颜色应该保持在＃222222。第二种可能性是如果新条目与标准值相同或者甚至没有条目被创建，那么颜色应该变回默认的＃222222。所以上面的代码工作到最后一点。

如果有人可以给我建议如何解决，我真的很感激。非常感谢。

来源

2012-06-20 bonny

你需要使用jquery！ onchange和ajax打个电话，告诉你这个值是否是新的或其他值。 – JellyBelly

@JellyBelly，请注意[jQuery不是所有事情的答案]（http://i.stack.imgur.com/sGhaO.gif）。 –

一些更具体的信息会很好。谢谢。 – bonny

-2

，而不是你的长期复杂的代码，只需使用HTML5 placeholder

Jsfiddle Example

HTML

<div id="searchbar"> 
<input name="searchbar" type="text" id="searchfield" placeholder="Some Text" /> 
</div>

CSS

#searchbar input { 
    color: green; 
} 
input::-webkit-input-placeholder { 
    color: red; 
} 
input:-moz-placeholder { 
    color: red; 
}

根据您的意愿更改颜色。

注意：Placeholder在IE中不支持。

UPDATE

如果你想用一个占位符来支持所有浏览器都使用这placeholder--a jQuery plugin和它tweek的style.css实现你的结果。

来源

2012-06-20 10:01:17 Libin

你好，谢谢你的回答。使用占位符不是一种选择，因为我有很多即用户。即使我你的代码与前面提到的是同样的问题。问题在于，颜色始终保持绿色。谢谢 – bonny

我没有得到你真正想要实现的。根据我的代码，如果没有输入（默认文本），文本颜色将为红色。但是当用户输入颜色时会变成绿色。这是你需要的吗？ – Libin

我使用Firefox和标准值出现绿色。当打字时它也会变成绿色。之后甚至会变绿。只是绿色。 – bonny

可以使用:focus伪类

CSS焦点更改CSS像这样

的CSS

input[type="text"]{ 
color:white; 
    background:red; 
    padding:5px; 
} 




input[type="text"]:focus{ 
color:black; 
    background:yellow; 
}

现场演示http://jsfiddle.net/VQ99D/

来源

2012-06-20 09:58:03

你好，谢谢你的回答。此代码与我的代码具有相同的问题。看，问题是当输入一些文本时，颜色以白色开始，而在输入内容时变为黑色。之后它切换回白色。这是我想避免的。这是两种不同颜色的问题。如果新值与标准值不同，它应该改变并保持黑色。如果它是空的或者像标准值一样应该变回白色。你懂了？谢谢。 – bonny

DIV输入标签值改变颜色

回答

相关问题