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 ...
随机推荐
- phonegap 附件下载及打开附件
出处:http://my.oschina.net/u/1011854/blog/169434 再次 谢谢作者! 在开发web app并且使用phonegap的情况下,附件下载着实是一件令人头疼的事,什 ...
- postfix
http://www.postfix.org/ All programmers are optimists -- Frederick P. Brooks, Jr. 所有程序员都是乐天派
- 可选的Web Components类库
首先需要说明的是这不是一篇 Web Components 的科普文章,如果对此了解不多推荐先读<A Guide to Web Components>. 有句古话-“授人以鱼,不如授人以渔” ...
- apache反向代理 负载均衡
开启模块: LoadModule lbmethod_byrequests_module modules/mod_lbmethod_byrequests.so LoadModule slotmem_sh ...
- ntko office 5.0.1.0注册码
如何手工卸载和安装NTKOOFFICE文档控件?(NTKOOFFICE文档控件) 1.何时进行手工卸载和安装; 一般情况下应该让客户端自动控件,这样当服务器控件版本更新时,客户端可以获得自动升级方面的 ...
- web首页设置如下代码可判断用户是用什么设备登录的？
var OnePage=true;//用来判断staticHtml.js中首页登入的信息判断var _mobileUrl = "http://a.abc.com";//手机用户通过 ...
- Blitz Templates介绍
Blitz Templates Blitz Templates-应用于大型互联网项目的非常强大非常快的模板引擎. 下载: sourceforge, 源代码 主页, win32 二进制文件, 其他语 ...
- [web] 200 OK (from cache) 与 304 Not Modified
为什么有的缓存是 200 OK (from cache),有的缓存是 304 Not Modified 呢?很简单,看运维是否移除了 Entity Tag.移除了,就总是 200 OK (from c ...
- SOCKET:SO_LINGER 选项
好多次接触到SO_LINGER选项,但总是忘了这是干什么用的.现在整理一下,我才明白这个参数是用来设定“SOCKET在CLOSE时候是否等待缓冲区发送完成”这个特性的.下面是一些详细的说明. sets ...
- sql访注入
http://www.dewen.org/q/6154/java%E7%A8%8B%E5%BA%8F%E9%98%B2%E6%AD%A2sql%E6%B3%A8%E5%85%A5%E7%9A%84%E ...