javascript当文本框获得焦点设置边框:
本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式，本来是一个非常简单的问题，但是有可能前台美工人员对javascript并不是太了解，所以还是通过一个简单的实例介绍一下，以便需要的朋友进行扩展。
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<head>
<title>文本框获得焦点边框变色-蚂蚁部落</title>
<style type="text/css">
ul{
  list-style:none;
  margin:50px;
}
.mytest{
  border:1px solid red;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var username=document.getElementById("username");
  var pw=document.getElementById("pw");
   
  username.onfocus=function(){
    this.style.border="1px solid red";
  }
  username.onblur=function(){
     this.style.border="";
  }
  pw.onfocus=function(){
     this.className="mytest";
  }
  pw.onblur=function(){
     this.className="";
  }
}
</script>
<body>
<ul>
   <li>姓名:<input type="text" id="username" /></li>
   <li>密码:<input type="password" id="pw" /></li>
</ul>
</body>

</html>

以上代码实现了我们的要求，当鼠标放在文本框的时候，可以实现文本框变色，离开的时候恢复原样。下
面就简单介绍一下实现原理:
为文本框绑定事件处理函数，当文本框获得焦点的时候通过style或者className设置边框的样式，当文本框失去焦点的时候就会将样式清空。

javascript当文本框获得焦点设置边框的更多相关文章

  1. JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点

    今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...

  2. jQuery 文本框得失焦点应用

    一.文本框得失焦点一种是改变文本框的样式    得到焦点:               失去焦点: 二.文本框得失焦点另一种是改变文本框的值    得到焦点:     失去焦点:       三.jQ ...

  3. jQuery 使得文本框获得焦点

      今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...

  4. Easyui中 messager.alert 后某文本框获得焦点

    messager.alert 后某文本框获得焦点 $.messager.alert({ title:'消息', msg:'电话号码 只能是数字!', icon: 'info', width: 300, ...

  5. JQuery初始加载时注册文本框失去焦点事件

    在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });

  6. javaScript:让文本框内的最后一个文字的后面获得焦点

    //当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myi ...

  7. WPF强制设置TextBox文本框的焦点

    在需求中遇到这样一种场景:就是在无论何时都要把焦点设置在一个TextBox中. 引用空间:System.Windows.Input 方式1:在窗体的Load事件中去设置焦点,(注意:不能在窗体的构造函 ...

  8. jQuery之文本框得失焦点

    版本一 css代码部分: .focus { border: 1px solid #f00; background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc h ...

  9. easyUI文本框获得焦点，失去焦点

    easyUI帮助文档对于文本框的操作没有提供直接获得焦点,或者失去焦点的方法,我们可以采用以下写法来实现. 获得焦点: $('input',$('#文本框Id').next('span')).focu ...

随机推荐

  1. Linux perf tools

    http://techblog.netflix.com/2015/08/netflix-at-velocity-2015-linux.html

  2. javaScript call 函数的用法说明

     call 方法  请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.ar ...

  3. 二十四种设计模式：享元模式(Flyweight Pattern)

    享元模式(Flyweight Pattern) 介绍运用共享技术有效地支持大量细粒度的对象. 示例有一个Message实体类,某些对象对它的操作有Insert()和Get()方法,现在要运用共享技术支 ...

  4. HtmlAgilityPack

    http://htmlagilitypack.codeplex.com/wikipage?title=Examples http://nuget.org/packages/HtmlAgilityPac ...

  5. A javascript library providing cross-browser, cross-site messaging/method invocation. http://easyxdm.net

    easyXDM - easy Cross-Domain Messaging easyXDM is a Javascript library that enables you as a develope ...

  6. yii 获取当前ip 常用的调用变量

    echo Yii::app()->request->hostInfo; //除域名外的URL echo Yii::app()->request->getUrl(); //除域名 ...

  7. ExtJs学习笔记之TextField

    输入框TextField 一个基本文本框表单项.可以直接代替传统文本输入框, 或者作为许多复杂基本控件的基类({如@link Ext.form.field.TextArea}) 和Ext.form.f ...

  8. uml类关系

    类间的关系:http://www.open-open.com/lib/view/open1328059700311.html 泛化 . 实现 . 关联 . 组合 . 聚合 . 依赖 泛化是继承类,实现 ...

  9. 阿里DNS

    二.阿里公共DNS http://www.alidns.com 全球统一服务ip: 223.5.5.5 223.6.6.6

  10. maven Spring 4.2+SpringMVC+dubbo解决TypeProxyInvocationHandler.invoke(SerializableTypeWrapper.java:239)

    java.lang.NullPointerException org.springframework.core.SerializableTypeWrapper$TypeProxyInvocationH ...