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 ...
随机推荐
- （转） Deep Learning in a Nutshell: Core Concepts
Deep Learning in a Nutshell: Core Concepts Share: Posted on November 3, 2015by Tim Dettmers 7 Comm ...
- Sklearn库例子1：Sklearn库中AdaBoost和Decision Tree运行结果的比较
DisCrete Versus Real AdaBoost 关于Discrete 和Real AdaBoost 可以参考博客:http://www.cnblogs.com/jcchen1987/p/4 ...
- 012. asp.net生成验证码图片(汉字示例/字母+数字)
protected void Page_Load(object sender, EventArgs e) { //生成验证码图片的基本步骤 string checkCode = "新年快乐& ...
- bash内部命令-1
外置命令 date expr seq nohup tput bash内置命令 trap set shopt date Linux时钟分为系统时钟(System Clock)和硬件(Real Time ...
- Top JavaScript Frameworks, Libraries & Tools and When to Use Them
It seems almost every other week there is a new JavaScript library taking the web community by storm ...
- 配置android模拟器
配置android模拟器 1. 将android-sdk-windows.rar和eclipse_android.rar解压到D盘根目标下 直接将两个压缩文件解压到当前分区(D盘)即可 2. 配置环境 ...
- MySQL Binlog 【ROW】和【STATEMENT】选择(转)
前言: 二进制日记录了数据库执行更改的操作,如Insert,Update,Delete等.不包括Select等不影响数据库记录的操作,因为没有对数据进行修改.二进制主要的功能有:复制(Re ...
- Redis Cluster 在PHP上的实践
版本:redis3.0.3 redis——slot: 'master' => [ '192.168.1.55:7000'=>[0,5460], '192.168.1.55:7001'=&g ...
- mongodb不同版本之间有很大的差异
今天主要说下我为了给mongodb数据库添加authorization,大家应该知道,mongo默认是无auth运行的.这可能是方便小伙伴学习命令吧. 由于之前发布的一个项目,在亚马逊的云上,处于内部 ...
- 【jmeter】测试报告优化<一>
具体问题如下: 1.Date report这里的时间没有正确显示出来 2.Summary里的字段Min Time和Max Time显示的是NaN,没有显示正确的时间. 本文主要解决上述两个问题,具体报 ...