javascript当文本框获得焦点设置边框
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当文本框获得焦点设置边框的更多相关文章
- JQuery下focus()无法自动获取焦点的处理方法 jquery如何使文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用 jQuery的话 是不是对象.focus()就可以了, Jav ...
- jQuery 文本框得失焦点应用
一.文本框得失焦点一种是改变文本框的样式 得到焦点: 失去焦点: 二.文本框得失焦点另一种是改变文本框的值 得到焦点: 失去焦点: 三.jQ ...
- jQuery 使得文本框获得焦点
今天遇见这么一个小小的问题,就是文本框中需要输入内容才可以提交,如果没有输入就提示并使该文本框获得焦点! 这么一个简单的事情如果没有使用jQuery的话 是不是对象.focus()就可以了, 可是 ...
- Easyui中 messager.alert 后某文本框获得焦点
messager.alert 后某文本框获得焦点 $.messager.alert({ title:'消息', msg:'电话号码 只能是数字!', icon: 'info', width: 300, ...
- JQuery初始加载时注册文本框失去焦点事件
在JQuery初始加载时注册文本框失去焦点事件 $(function(){ $('#文本框ID').blur(function(){ //对文本框内容进行处理 }); });
- javaScript:让文本框内的最后一个文字的后面获得焦点
//当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myi ...
- WPF强制设置TextBox文本框的焦点
在需求中遇到这样一种场景:就是在无论何时都要把焦点设置在一个TextBox中. 引用空间:System.Windows.Input 方式1:在窗体的Load事件中去设置焦点,(注意:不能在窗体的构造函 ...
- jQuery之文本框得失焦点
版本一 css代码部分: .focus { border: 1px solid #f00; background: #fcc; } 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc h ...
- easyUI文本框获得焦点，失去焦点
easyUI帮助文档对于文本框的操作没有提供直接获得焦点,或者失去焦点的方法,我们可以采用以下写法来实现. 获得焦点: $('input',$('#文本框Id').next('span')).focu ...
随机推荐
- javascript闭包，arguments和prototype
prototype javascript中一切皆对象,并且对象的属性和方法可以任意添加,例如: var obj=function(){}; obj.name="jack"; 但是下 ...
- MySQL – optimizer_search_depth
Working on customer case today I ran into interesting problem – query joining about 20 tables (thank ...
- shell之脚本练习
脚本需求集合贴-自主开发的 对频繁执行的任务有编写脚本的价值 对单次执行的任务就用笨的,简单的办法 1.对asterisk写一个脚本 查日志 输入日期--能够输出对应日期的日志 输入多个条件--能够输 ...
- linux包之sysstat之sar命令
要启动SAR,必须通过cron工具以周期性的间隔启动.安装sysstat包后,默认创建一个/etc/cron.d/sysstat文件,其默认内容为:# run system activity acco ...
- 【转】一个域名对应多个IP地址，接下来系统是依据什么决定使用哪个IP地址的？
例如下图所示:nslookup http://www.sina.com.cn返回了多个IP地址,当使用curl通过域名进行访问时,则自动选择了其中一个地址进行访问,这个选择的过程里发生了什么事情? 绝 ...
- typeof和instanceof运算符
(1)typeof运算符用于判断某一个变量的数据类型,它可以作为函数来用,如typeof(a)可以返回变量a的数据类型:也可以作为一个运算符来使用,例如typeof a 也可以返回变量a的数据类型,不 ...
- android数据存储之SharedPreferences
一.SharedPreferences简介 (1)SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配置,比如Activity状态,Activ ...
- Asianux3配置yum
把下面四个文件放到/etc/yum.repos.d目录下 dag.repo: [dag] name=Dag RPM Repository for RHEL5 baseurl=http://mirror ...
- 功能更强大的格式化工具类 FormatUtils.java
package com.util; import java.text.DecimalFormat; import java.text.ParseException; import java.text. ...
- Character 比较注意先要转换成字符串类型
Character tmp = '/'; if("/".equals(tmp)){ System.out.print("error"); } if(" ...