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>

赞 (0)

相关推荐

  • js/jquery获取文本框输入焦点的方法

    方法一. 复制代码 代码如下: function CheckForm() {             if(document.form1.trainingName.value==""){                     alert("培训班名称不能为空!");                     document.form1.trainingName.focus();                     return false;          

  • js实现文本框中焦点在最后位置

    在一般的程序中.程序员做输入框内容正确性检测时一般喜欢通过判断内容的合法性来确定焦点框. 如: 复制代码 代码如下: if(obj.value==""){   obj.focus();   return false;} 这样当哪一项输入框为空是就将焦点移动那一项输入框..这项功能使用起来非常方便..但是存在一个小小的问题... 那就是obj.focus()将焦点移动到输入框后,会将文字光标(就是一闪一闪的竖线)移动到这个输入框的第一个字符的位置...就上面的判断而言..如果文本框中没有

  • js焦点文字滚动效果代码分享

    js焦点文字滚动效果代码分享

    本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:---------------

  • JS+CSS实现淡入式焦点图片幻灯切换效果的方法

    本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • 使用js判断控件是否获得焦点

    使用JS获取具有焦点控件的ID: 复制代码 代码如下: $("#textID").click(function(){var act = document.activeElement.id;if(act == "textID" ){ alert("true");}else{ alert("false");}} ); 使用jquery获取具有焦点控件的ID:var act = $(document.activeElement).a

  • js 上下左右键控制焦点(示例代码)

    如下所示: 复制代码 代码如下: //begin---------------上下左右键控制 if('${iscontrol_mchntid}'.indexOf('${mchntid}')!=-1){ var texts = new Array();//设置为focus所在的locationvar x = 2;var y = 3;var maxx = 0;var maxy = 0;window.onload=function(){var inputs = $("[location]")

  • 通过JS来判断页面控件是否获取焦点

    以一个TextBox为例,使用javascript来判断其是否获取到焦点. 其实很简单,正常的思路分为两个途径来看: 当文本框为服务端控件的时候,我们可以很简单地想到使用:if(TextBox1.Focused)来进行判断,使用TextBox1.Attributes.add('onfocus','要执行的方法'); 来绑定方法.当然,服务端的控件也是可以使用JS来进行操作的,不过,需要提醒注意的是服务端的ID与实际客户端的ID很可能是不一样的,所以在使用getelementbyid的时候需要注意

  • js设置文本框中焦点位置在最后的示例代码(简单实用)

    在火狐浏览器中直接使用this.focus();即可实现. 在IE中,在this.focus();之后再把文本框的值赋给文本框,焦点即在最后了.很简单哟!! 如: 复制代码 代码如下: var tar=document.getElementByIdx_x("name");if(tar.attachEvent){tar.attachEvent('onmouseover',focus(tar),false);}else{tar.addEventListener('mouseover',fo

  • js 判断控件获得焦点的示例代码

    JS判断一个对象已获得焦点document.activeElement.tagName //tagName 标签名 实例:判断body获得光标时关闭输入法. 复制代码 代码如下: var act = document.activeElement.tagName.toLowerCase();   if(act.indexOf("body") != -1 || act.indexOf("html") != -1)   {    document.body.style.i

  • JS实现Enter键跳转及控件获得焦点

    复制代码 代码如下: //回车跳转 jQuery(document).ready(function () { //$(':input:text:first').focus(); jQuery(':input:enabled').addClass('enterIndex'); // get only input tags with class data-entry textboxes = jQuery('.enterIndex'); // now we check to see which bro

  • js控制输入框获得和失去焦点时状态显示的方法

    本文实例讲述了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"&

  • js仿土豆网带缩略图的焦点图片切换效果实现方法

    本文实例讲述了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/

  • js实现获取焦点后光标在字符串后

    主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看 复制代码 代码如下: var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); //其原理就是获得焦点后重新把自己复制粘帖一下

随机推荐