【www.bbyears.com--文本特效】
例子
function appendit()
{
var nodes = document.getElementsByTagName("INPUT");
for (var i=0; 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 type="text/javascript">
// focusClass : 获取焦点时的样式
// normalClass : 正常状态下的样式
function focusInput(focusClass, normalClass) {
var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
elements[i].onfocus = function() { this.className = focusClass; };
elements[i].onblur = function() { this.className = normalClass||""; };
}
}
}
</script>
<script type="text/javascript">
window.onload = function () {
focusInput("focusInput", "normalInput");
}
</script>
请输入姓名：
在火狐下也有效，只不过火狐和chrome下，这两款浏览器默认会自动会输入框添加点击效果，所以有时候看不清，IE下表现突出。
把现在流行的基于jquery实现方法给各位介绍一个例子
Html code:
文本框聚焦清空默认值边框变色，离开焦点添加默认值
Css code
:
这个是基于jquery库的啊，请自己加上啊。
代码如下Js code:
<script type="text/javascript">
// JavaScript Document
$(document).ready(function(){
function input()
{
//each遍历文本框
$(".inputText").each(function(){
var $val=this.value;//保存当前文本框的值
var $ss=$(".ss").val();
$(this).focus(function(){
//获得焦点时，如果值为默认值，则清空文本框的值
if (this.value== $val){
this.value="";
}
});
$(this).blur(function() {
//失去焦点时，如果值为空，则重新加上文本框默认值
if (this.value==""){
this.value=$val;
}
});
});
}
input();
})
</script>