脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS 获得焦点

JS文本获得焦点清除文本文字的示例代码

 更新时间：2014年01月13日 09:57:40   作者：  
本篇文章主要是对JS文本获得焦点清除文本文字的示例代码进行介绍，需要的朋友可以过来参考下，希望对大家有所帮助

如下所示：

复制代码 代码如下:

<!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提升机制Hoisting详解

    JavaScript提升机制Hoisting详解

    这篇文章主要介绍了JavaScript提升机制Hoisting详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 基于Bootstrap的Java开发问题汇总（Spring MVC）

    基于Bootstrap的Java开发问题汇总（Spring MVC）

    这篇文章主要为大家汇总了基于Bootstrap的Java开发问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • uniapp中常用的事件处理方法详解

    uniapp中常用的事件处理方法详解

    在UniApp中事件处理非常重要,通过事件处理可以实现用户与应用程序之间的交互,这篇文章主要给大家介绍了关于uniapp中常用的事件处理方法的相关资料,需要的朋友可以参考下
    2023-12-12
  • js控制多图左右滚动切换效果代码分享

    js控制多图左右滚动切换效果代码分享

    这篇文章主要介绍了js控制多图左右滚动切换效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • 纯javascript实现四方向文本无缝滚动效果

    纯javascript实现四方向文本无缝滚动效果

    本文主要给大家分享了使用纯javascript实现的可控制的四方向文本无缝滚动的代码，效果非常不错，有需要的小伙伴可以参考下。
    2015-06-06
  • 怎么引入(调用)一个JS文件

    怎么引入(调用)一个JS文件

    这篇文章主要介绍了引入(调用)一个JS文的方法，非常不错介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
    2016-05-05
  • JavaScript中判断页面关闭、页面刷新的实现代码

    JavaScript中判断页面关闭、页面刷新的实现代码

    这篇文章主要介绍了JavaScript中判断页面关闭、页面刷新的实现代码,在一些特殊的场合中会用到这个技术,需要的朋友可以参考下
    2014-08-08
  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    这篇文章主要为大家详细介绍了JS组件Bootstrap实现下拉菜单效果代码，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • echarts地图区域显示不同颜色代码示例

    echarts地图区域显示不同颜色代码示例

    地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气,这篇文章主要给大家介绍了关于echarts地图区域显示不同颜色的相关资料,需要的朋友可以参考下
    2023-10-10
  • JS解析XML实例分析

    JS解析XML实例分析

    这篇文章主要介绍了JS解析XML的方法,实例分析了javascript针对IE浏览器与非IE浏览器解析XML文件的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01

最新评论