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插件实现常见的幻灯片效果
Nov 01 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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
77A一级收信机修理记
2021/03/02 无线电
正则表达式语法
2006/10/09 Javascript
xml在joomla表单中的应用详解分享
2012/07/19 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
js变换显示图片的实例
2013/04/16 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
生物制药自我鉴定
2014/01/25 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
说明书格式及范文
2014/05/07 职场文书
低碳环保标语
2014/06/12 职场文书
2014年导购员工作总结
2014/11/18 职场文书
志愿者个人总结
2015/03/03 职场文书
学校会议通知范文
2015/04/15 职场文书
反邪教观后感
2015/06/11 职场文书
教师节领导致辞
2015/07/29 职场文书
《花钟》教学反思
2016/02/17 职场文书
员工试用期工作总结
2019/06/20 职场文书
python如何在word中存储本地图片
2021/04/07 Python
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js