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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
javascript基本语法
May 31 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
Jun 17 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 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 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
解决vue移动端适配问题
2018/12/12 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
Python 中开发pattern的string模板(template) 实例详解
2017/04/01 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
目前最全的python的就业方向
2018/06/05 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
pandas参数设置的实用小技巧
2020/08/23 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
百联网上商城:i百联
2017/01/28 全球购物
企业车辆管理制度
2014/01/24 职场文书
人力资源总监工作说明
2014/03/03 职场文书
公务员保密承诺书
2014/03/27 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
土地租赁协议书
2015/01/29 职场文书
硕士学位申请报告
2015/05/15 职场文书
《所见》教学反思
2016/02/23 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
正确使用MySQL update语句
2021/05/26 MySQL