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目录规范和含义(转)

      Linux目录配置 在了解了每个文件的相关种类与属性,以及了解了如何更改文件属性/权限的相关信息后,再来要了解的就是, 为什么每套Linux distributions他们的配置文件啊.执行文件啊 ...

  2. 【转】win7 uac关闭

    方法1: 原文网址:http://jingyan.baidu.com/article/c275f6bae2650ce33d756795.html 首先点击开始,并在输入框中输入“MSCONFIG”,打 ...

  3. java.util.concurrent Class ThreadPoolExecutor

    http://docs.oracle.com/javase/7/docs/api/java/util/concurrent/ThreadPoolExecutor.html

  4. vb6通send和recv请求网络资源

    最近为了弄清楚send和recv的用法,特意用vb6测试了一下,头文件冗余的比较多: Option Explicit Private Declare Function setsockopt Lib & ...

  5. EDIUS删除创建的工程预设的教程

    自从第一次启动EDIUS 8,创建了一个工程预设,之后每次启动软件都会出现,但创建的预设又用不着了,如何删除呢?下面,小编就 给大家演示如何正确删除EDIUS 8工程预设. 1.启动软件,点击设置菜单 ...

  6. 开放平台-web实现QQ第三方登录

    应用场景     web应用通过QQ登录授权实现第三方登录.   操作步骤     1  注册成为QQ互联平台开发者,http://connect.qq.com/     2  准备一个可访问的域名, ...

  7. SaaS、PaaS和IaaS

    •SaaS(软件即服务) •PaaS(平台即服务) •IaaS(基础架构即服务)

  8. oracle数据字典-权限-角色

    每个数据库都提供了各自的数据字典的方案,虽然形式不同,但是目的和作用是一样的,比如在mysql里数据字典是在information_schema 里表现的,sqlserver则是在sys这个系统sch ...

  9. ios 企业发布

    ios 1. 支持的tls 协议 1.2 windows server 默认没有启用 检测的网站: https://www.ssllabs.com/ssltest 解决的方法: IIS crypto ...

  10. Jquary获取页面控件的值

    一 Jquery获得服务器控件值的方法由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,google了下,总结有以下3种方法: 服务器控件代码:<as ...