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判断变量是否为undefined的两种写法区别
Dec 04 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
AngularJs解决跨域问题案例详解(简单方法)
May 19 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
js实现全选和全不选
Jul 28 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之第二天
2006/10/09 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
vue中关闭eslint的方法分析
2018/08/04 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
python备份文件的脚本
2008/08/11 Python
Python设置Socket代理及实现远程摄像头控制的例子
2015/11/13 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
平面设计师岗位职责
2014/09/18 职场文书
大学生实习证明范本
2014/09/19 职场文书
2014年妇联工作总结
2014/11/21 职场文书
质量负责人岗位职责
2015/02/15 职场文书
就业推荐表院系意见
2015/06/05 职场文书
大学入学感言
2015/08/01 职场文书
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技