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. Java static block static constructor , static field

    http://stackoverflow.com/questions/7121213/singleton-instantiation http://docs.oracle.com/javase/spe ...

  2. tomcat 源码解析

    how_tomcat_works https://www.uzh.ch/cmsssl/dam/jcr:00000000-29c9-42ee-0000-000074fab75a/how_tomcat_w ...

  3. PADS Logic 常见错误报告内容

    1.PCB Decal LED0805 not found in Library pcb封装不在库中. 找到原图中的pcb-save to library 未分配PCB时候,右键Edit part-找 ...

  4. Linux中/proc/[pid]/status详细说明

    [root@localhost ~]# cat /proc/self/status Name: cat State: R (running) SleepAVG: 88% Tgid: 5783 Pid: ...

  5. Fixing Poor MySQL Default Configuration Values

    I've recently been accumulating some MySQL configuration variables that have defaults which have pro ...

  6. Python的numpy库下的几个小函数的用法

    numpy库是Python进行数据分析和矩阵运算的一个非常重要的库,可以说numpy让Python有了matlab的味道 本文主要介绍几个numpy库下的小函数. 1.mat函数 mat函数可以将目标 ...

  7. javascript操作class和style样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. jquery显示隐藏toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 设置JSP不做浏览器缓存

    CacheFilter代码: package com.my.filter; import java.io.*; import javax.servlet.*; import javax.servlet ...

  10. 06文件与IO

    这节主要学习系统调用stat.lstat.fstat. 格式如下: int fstat(int filedes, struct stat *buf); int stat(const char *pat ...