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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
JS常见算法详解
Feb 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
Python学习教程之常用的内置函数大全
2017/07/14 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
快速了解python leveldb
2018/01/18 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
python中wheel的用法整理
2020/06/15 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
植树造林的宣传标语
2014/06/23 职场文书
员工家属慰问信
2015/03/24 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server