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 美元符冲突的解决方法
Mar 28 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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多文件上传下载示例分享
2014/02/20 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python入门学习之字符串与比较运算符
2015/10/12 Python
python开发之thread线程基础实例入门
2015/11/11 Python
简单了解django缓存方式及配置
2019/07/19 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
利用指针变量实现队列的入队操作
2012/04/07 面试题
高校教师思想汇报
2014/01/11 职场文书
村抢险救灾方案
2014/05/09 职场文书
社区科普工作方案
2014/06/03 职场文书
相亲大会策划方案
2014/06/05 职场文书
买房子个人收入证明
2014/10/12 职场文书
烟台的海导游词
2015/02/02 职场文书
小学教师自我评价
2015/03/04 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python