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中处理带有命名空间的XML数据
Jun 13 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
JavaScript Date对象详解
Mar 01 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 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提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php把session写入数据库示例
2014/02/26 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
简单的分页代码js实现
2016/05/17 Javascript
js转html实体的方法
2016/09/27 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python中的split、rsplit、splitlines用法说明
2020/10/23 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
python利用xpath爬取网上数据并存储到django模型中
2021/02/26 Python
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
酒店中秋节活动方案
2014/01/31 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
教师师德师风整改措施
2014/10/24 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL