脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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>

您可能感兴趣的文章:

相关文章

  • IE7中javascript操作CheckBox的checked=true不打勾的解决方法

    IE7中javascript操作CheckBox的checked=true不打勾的解决方法

    在IE7下，生成的Checkbox无法正确的打上勾。 原因是 chkbox控件还没初始化(appendChild)，就开始操作它的结果
    2009-12-12
  • js正则取值的结果数组调试方法

    js正则取值的结果数组调试方法

    今天小编就为大家分享一篇js正则取值的结果数组调试方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 用倒置滤镜把div倒置，再把table倒置。

    用倒置滤镜把div倒置，再把table倒置。

    用倒置滤镜把div倒置，再把table倒置。...
    2007-07-07
  • JavaScript中轻松获取页面参数值的N种方法(含代码示例)

    JavaScript中轻松获取页面参数值的N种方法(含代码示例)

    本文旨在深入浅出地揭示如何在JavaScript中巧妙提取那些隐藏在URL背后的宝贵信息,从基础方法到高级技巧,一网打尽,无论你是编程界的菜鸟还是久经沙场的老将,这里都有值得你品鉴的“珍馐”,需要的朋友可以参考下
    2024-06-06
  • el-select数据过多懒加载的解决(loadmore)

    el-select数据过多懒加载的解决(loadmore)

    这篇文章主要介绍了el-select数据过多懒加载的解决(loadmore)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • js获取单选按钮的数据

    js获取单选按钮的数据

    js获取单选按钮的数据...
    2006-11-11
  • 页面版文本框智能提示JS代码

    页面版文本框智能提示JS代码

    首先说下背景，该code用于一个多条件查询界面，原本该查询条件由一个下拉列表提供，但是由于下拉列表数据量过大，用户使用不方便，便希望在页面给出一个智能提示的功能，但搜索的数据来自下拉列表
    2009-11-11
  • JavaScript构建自己的对象示例

    JavaScript构建自己的对象示例

    这篇文章主要介绍了JavaScript构建自己的对象,结合实例形式分析了javascript自定义类的定义与对象的实例化相关操作技巧,需要的朋友可以参考下
    2016-11-11
  • js制作简易计算器

    js制作简易计算器

    这篇文章主要为大家详细介绍了js制作简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 微信小程序实现拼图游戏

    微信小程序实现拼图游戏

    这篇文章主要为大家详细介绍了微信小程序实现拼图游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07

最新评论