编程 Javascript

JS文本获得焦点清除文本文字的示例代码

Posted in Javascript onJanuary 13, 2014

如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.clearFieldBlurred{
    color:#ccc;
    font-style:italic;
    font-weight:normal;
    width:150px;
}
.clearFieldActive{
    color:#4e4e4e;
    font-weight:bold;
    width:150px;
}
</style>
<script type="text/javascript">
function clearFiled(){
    var bbb=document.getElementById("bbb");
    if(bbb.value=="bbb"){
        bbb.value='';
        bbb.className='clearFieldActive';
    }
}
window.document.onmousedown=function(){
    var bbb=document.getElementById('bbb');
    if(bbb.value==""){
    bbb.value='bbb';
    bbb.className='clearFieldBlurred';
    }
}
</script>
</head>
<body>
<input type="text" id="aaa"  value="aaa" class="clearFieldBlurred" onfocus="if(this.value=='aaa'){this.value='';this.className='clearFieldActive';}"  onblur="if(this.value==''){this.value='aaa';this.className='clearFieldBlurred';}"/>
<br />
<input type="text" id="bbb" value="bbb" class="clearFieldBlurred" onclick="clearFiled()"  />
</body>
</html>

JS文本获得焦点清除文本文字的示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript 继承的实现

Jul 09 Javascript

javascript简单事件处理和with用法介绍

Sep 16 Javascript

js向上无缝滚动,网站公告效果具体代码

Nov 18 Javascript

Vue.js事件处理器与表单控件绑定详解

Mar 20 Javascript

微信JS-SDK选取手机照片上传功能

Apr 21 Javascript

深入理解Vue生命周期、手动挂载及挂载子组件

Sep 27 Javascript

总结js中的一些兼容性易错的问题

Dec 18 Javascript

10行原生JS实现文字无缝滚动(超简单)

Jan 02 Javascript

微信jssdk逻辑在vue中的运用详解

Nov 14 Javascript

JavaScript解析及序列化JSON的方法实例分析

Jan 04 Javascript

node(koa2) web应用模块介绍详解

Mar 29 Javascript

angular 服务随记小结

May 06 Javascript

javascript间隔定时器(延时定时器)学习间隔调用和延时调用

Jan 13 #Javascript

parentElement,srcElement的使用小结

Jan 13 #Javascript

javaScript中的this示例学习详解及工作原理

Jan 13 #Javascript

JS 日期比较大小的简单实例

Jan 13 #Javascript

JS之Date对象和获取系统当前时间详解

Jan 13 #Javascript

JS OffsetParent属性深入解析

Jan 13 #Javascript

JavaScript网页定位详解

Jan 13 #Javascript