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技术-屏蔽类
Aug 15 Javascript
extjs grid取到数据而不显示的解决
Dec 29 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
layer 刷新某个页面的实现方法
Sep 05 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
javascript实现下雨效果
2017/03/27 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python实现文件的备份流程详解
2019/06/18 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
无偿献血倡议书
2014/04/14 职场文书
班风学风建设方案
2014/05/06 职场文书
主题班会演讲稿
2014/05/22 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
法院个人总结
2015/03/03 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
golang 实现并发求和
2021/05/08 Golang
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python