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 api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
js实现简单掷骰子小游戏
Oct 24 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
jquery插件之easing 动态菜单
2010/08/21 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python查看微信撤回消息代码
2018/06/07 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
介绍一下RMI的基本概念
2016/12/17 面试题
教师年终个人自我评价
2013/10/04 职场文书
简历中求职的个人自我评价
2013/12/03 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
统计系教授推荐信
2014/02/28 职场文书
超市开店计划书
2014/04/26 职场文书
安全伴我行主题班会
2015/08/13 职场文书
vue使用节流函数的踩坑实例指南
2021/05/20 Vue.js
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server