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 相关文章推荐
JQuery之拖拽插件实现代码
Apr 14 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
2013/05/08 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
python与php实现分割文件代码
2017/03/06 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
古驰英国官网:GUCCI英国
2020/03/07 全球购物
Order by的几种用法
2013/06/16 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
旅行社各个岗位职责
2014/03/15 职场文书
百年校庆节目主持词
2014/03/27 职场文书
英语系毕业生求职信
2014/07/13 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
演讲开场白台词大全
2015/05/29 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers