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. JSON的转换（将JSON转换为字符串，将字符串转化为JSON）

    eval()和JSON.stringify()   1.eval用于从一个字符串中解析出json 对象,创建包含 JSON 语法的 JavaScript 字符串.例如 var str = '{ &qu ...

  2. 论文笔记之：Deep Reinforcement Learning with Double Q-learning

    Deep Reinforcement Learning with Double Q-learning Google DeepMind Abstract 主流的 Q-learning 算法过高的估计在特 ...

  3. 答辩ppt

    目录:1.2.3.4 poct市场 荧光免疫技术(特点:灵敏性.可做仪器很小) 意义 国内外现状:万福.天宝 研究内容1.2.3. 一.意义与背景 二.内容(测量原理) 目标 三.仪器设计 1.基本测 ...

  4. 如何使用投影看着备注分享自己的PPT

    1.  设置多屏幕 一般你的笔记本就是1,   投影是2 2. 设置幻灯片的放映方式 设置幻灯片显示于另外一个监视器  并勾选显示演示者视图 3.  点击放映 就会出现 左上角是ppt本身, 右上角是 ...

  5. 8000401a 错误 ,检索 COM 类工厂中 CLSID 为 的组件时失败，原因是出现以下错误: 8000401a。

    "/"应用程序中的服务器错误. -------------------------------------------------------------------------- ...

  6. 移动web 应用开发调试

    调试前端页面我一直使用着神器Chrome开发人员工具, 那个方便, 大家都懂的. 但当我们要调试为移动设备设计的Web页面时, 是不是觉得有点力不从心了?平时开发时我们可以一直都是在桌面调试这个页面, ...

  7. 无状态Web应用集成——《跟我学Shiro》

    http://www.tuicool.com/articles/iu2qEf 在一些环境中,可能需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时带上 ...

  8. C# 输出pdf文件流在页面上显示

    1 不调用itextsharp.dll的操作 /// <summary>        /// 生成pdf流        /// </summary>        /// ...

  9. Spark(一): 基本架构及原理

    Apache Spark是一个围绕速度.易用性和复杂分析构建的大数据处理框架,最初在2009年由加州大学伯克利分校的AMPLab开发,并于2010年成为Apache的开源项目之一,与Hadoop和St ...

  10. Android 网络编程--URL互联网资源

    1.加入权限 <uses-permission android:name="android.permission.INTERNET"/> 2.Layout设计 < ...