收集的几种在css中控制input输入框得到焦点时是一种颜色，失去焦点后变成另一种颜色的代码：
程序代码
<script language="JAVAscript" type="text/JAVAscript">
function doClickStyle(obj,objclassname){
document.getElementById(obj).className=objclassname;
}
</script>
<style>
.onlook {background:#fff;border:1px solid #ccc;}
.look {background:#f00;border:1px solid #000;}
</style>
<input type="text" id="text10" tabindex="17" class="nolook" onfocus="doClickStyle('text10','look')" onblur="doClickStyle('text10','nolook')" value="" />
程序代码
onfocus="this.style.backgroundColor='rgb(0,0,0)'" onblur="this.style.backgroundColor='rgb(255,255,255)'"
程序代码
<script language="JAVAscript" type="text/JAVAscript">
function appendit()
{
var nodes = document.getElementsByTagName("INPUT");
for (var i=0; i<nodes.length; i++)
{
var ctype = nodes[i].getAttribute("type");
if (ctype == 'text')
{
nodes[i].onfocus = function () { this.style.backgroundColor='#33FF00'; }
nodes[i].onblur = function () { this.style.backgroundColor='#3366FF'; }
}
}
}
</script>
</HEAD>
<BODY onload="appendit();">
<FORM METHOD=PosT ACTION=""><br/>
<INPUT TYPE="text" NAME=""><br/>
<Select NAME=""><option value=12>12</option></Select>
<TEXTAREA NAME="" ROWS="" COLS=""></TEXTAREA><br/>
<INPUT TYPE="text" NAME=""><br/>
<INPUT TYPE="text" NAME=""><br/>
<INPUT TYPE="radio" NAME=""><br/>
</FORM>
</BODY>
程序代码
<style type="text/CSS" media="all" title="Default">
.myCSS {
color:red;
never-online:expression(onfocus=function(){
this.style.color="blue";
},onblur=function(){
this.style.color="red";
})
}
</style>
<body id="www.never-online.net">
<input class="myCSS" value="never-online"/>
</body>
程序代码
<script>
window.onload = function()
{
var obj = document.body.all.tags("input");
for(i = 0; i < obj.length; i++)
{
if(obj[i].type == "text")
{
obj[i].className = "onBlur"
obj[i].onfocus = function() {this.className = "onFouce"}
obj[i].onblur = function () {this.className = "onBlur"}
}
}
}
</script>
<style type="text/CSS" media="all" title="Default">
.onFouce {
color: green;
}
.onBlur {
color: orange;
}
</style>
<body>
<input type="text" value="test"/>
<input type="text" value="test"/>
<input type="text" value="test"/>
<input value="test"/>
<input value="test"/>
<input value="test"/>
程序代码
<style type="text/CSS">
input{
border: 1 solid #0033ff;
}
.EditableElement_onFocus{
background-color: #eeffff;
}
.EditableElement_onBlur{
background-color: white;
}
.Button_onFocus{
background-color: #ffffee;
}
.Button_onBlur{
background-color: buttonface;
}
</style>
<SCRIPT LANGUAGE="JAVAScript">
<!--
function InputEventAppender() {
this.setClassNameForElement = function(objects, types, buttons){
for(var i=0; i<objects.length; i++) {
var aInput = objects[i];
var onfocusClassName = null;
var onblurClassName = null;
if(types.indexOf(aInput.getAttribute("type"))>=0) {
aInput.onfocus = function(){this.className = "EditableElement_onFocus";};
aInput.onblur = function(){this.className = "EditableElement_onBlur";};
}else if(buttons.indexOf(aInput.getAttribute("type"))>=0) {
aInput.onfocus = function(){this.className = "Button_onFocus";};
aInput.onblur = function(){this.className = "Button_onBlur";};
}
}
};
this.init = function() {
var inputs = document.getElementsByTagName("INPUT");
var editableElementTypes = "text,password,radio,checkbox,image,password";
var buttonTypes = "button,reset,submit";
this.setClassNameForElement(inputs, editableElementTypes, buttonTypes);
};
}
window.onload = function(){(new InputEventAppender()).init();};
//-->
</SCRIPT>
<INPUT TYPE="text" NAME=""><BR>
<INPUT TYPE="text" NAME=""><BR>
<INPUT TYPE="text" NAME=""><BR>
<INPUT TYPE="radio" NAME="aa"> <INPUT TYPE="radio" NAME="aa"> <INPUT TYPE="radio" NAME="aa"><BR>
<INPUT TYPE="checkbox" NAME=""><BR>
<INPUT TYPE="image" SRC=""><BR>
<INPUT TYPE="password" value=""><BR>
<INPUT TYPE="reset" value="this is a reset button"><BR>
<INPUT TYPE="submit" value="this is a submit button"><BR>
<INPUT TYPE="button" VALUE="This is a button">
http://hi.baidu.com/kule/blog/item/4d5aacafce2b38cc7dd92a07.html
浙公网安备 33010602011771号