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 load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
JavaScript阻止事件冒泡的方法
Dec 06 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
Laravel实现用户注册和登录
2015/01/23 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
js 颜色选择插件
2017/01/23 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python 数据结构之队列的实现
2017/01/22 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
微信跳一跳游戏python脚本
2020/04/01 Python
python使用mysql的两种使用方式
2018/03/07 Python
python三大神器之fabric使用教程
2019/06/10 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
简单的命令查看安装的python版本号
2020/08/28 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
女大学生自我鉴定
2013/12/09 职场文书
运动会通讯稿500字
2014/02/20 职场文书
生日庆典策划方案
2014/06/02 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
实践论读书笔记
2015/06/29 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang