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>
Javascript 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
用js编写留言板
Mar 17 Javascript
vue.js实现双击放大预览功能
Jun 23 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
You might like
php多任务程序实例解析
2014/07/19 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP上传Excel文件导入数据到MySQL数据库示例
2016/10/25 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
ReactNative之FlatList的具体使用方法
2017/11/29 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
Python做简单的字符串匹配详解
2017/03/21 Python
python http接口自动化脚本详解
2018/01/02 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
Django实现表单验证
2018/09/08 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
python os.rename实例用法详解
2020/12/06 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
专营店会计助理岗位职责
2013/11/29 职场文书
化验室技术员岗位职责
2013/12/24 职场文书
教师师德承诺书
2014/03/26 职场文书
农民工工资支付承诺函
2014/03/31 职场文书
淘宝客服工作职责
2014/07/11 职场文书
博士生专家推荐信
2014/09/26 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫