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 相关文章推荐
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
jQuery代码优化 选择符篇
Nov 01 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
手把手教你用Node.js爬虫爬取网站数据的方法
Jul 05 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
Vue实现验证码功能
Dec 03 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
Python变量及数据类型用法原理汇总
2020/08/06 Python
python如何对链表操作
2020/10/10 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
销售业务员岗位职责
2014/01/29 职场文书
八项规定整改措施
2014/02/12 职场文书
家长对孩子的评语
2014/04/18 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS