当鼠标聚焦时输入框变色（focus事件实例）
当鼠标聚焦时输入框变色
css相关,鼠标点击<input>输入域后出现有颜色的边框
原理：css伪类之input输入框鼠标点击边框变色效果
伪类元素的使用：:focus
一：当输入框获得焦点时，改变它的背景色
效果图：当鼠标聚焦时输入内部填充色改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标点击<input>输入域后出现有颜色的边框</title>
<style type="text/css">
* {margin: 0; padding: 0;}
.main {margin: 50px auto; width: 400px;}
.inp {
width: 200px;
height: 30px;
}
.inp:focus {
outline:none;
border: 1px solid #CCCCCC;
background:#f0ecec;
}
</style>
</head>
<body>
<div class="main">
<input type="text" class="inp">
<div class="yanzhen">111</div>
</div>
</body>
</html>
==========================
二：效果图：当鼠标聚焦时外部border变色，css实现的方法：
实现点击的时候出现蓝色光晕
代码：
.inp:focus {
border-style:solid;
border-color: #03a9f4;
box-shadow: 0 0 15px #03a9f4;
}
js实现的方法：
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>输入框点击时边框变色效果</title>
</head>
<body>
<style type="text/css">
.focusInput {border:1px solid #99CC33;}
</style>
<script type="text/javascript">
function focusInput(focusClass) {
var elements = document.getElementsByTagName("input");
for (var i=0; i < elements.length; i++) {
if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
elements[i].onfocus = function() { this.className = focusClass; };
elements[i].onblur = function() { this.className = ''; };
}
}
}
window.onload = function () {
focusInput('focusInput');
}
</script>
请输入姓名：<input type="text" />
</body>
</html>
三：js控制input内部填充背景和border边框同时变色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.look {background:#e6e6e6;border:1px solid #e6e6e6;}
</style>
</head>
<script language="javascript" type="text/javascript">
function doClickStyle(obj,objclassname){
document.getElementById(obj).className=objclassname;
}
</script>
<body>
<input type="text" id="text10" tabindex="17" " onfocus="doClickStyle('text10','look')" onblur="doClickStyle('text10','nolook')" value="" />
</body>
</html>
四：css点击一个input输入框怎么使其后面的button也变色
以摩拜单车为例，参考链接：http://www.w3school.com.cn/jquery/event_focus.asp
本专题记录平时项目中一些最基础简单的实现代码和容易忽略的细节，仅仅是为了记录，对于自己来说，基础是最重要的，一个项目就是由无数的基础组成
注：
原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。
公众号回复“1”，拉你进程序员技术讨论群.
当鼠标聚焦时输入框变色（focus事件实例）的更多相关文章
- focus([[data],fn]) 当元素获得焦点时，触发 focus 事件。
focus([[data],fn]) 概述 当元素获得焦点时,触发 focus 事件.直线电机选型 可以通过鼠标点击或者键盘上的TAB导航触发.这将触发所有绑定的focus函数,注意,某些对象不支持f ...
- .net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
- 鼠标聚焦到Text输入框时，按回车键刷新页面原因及解决方法
前提 一个form中只有一个输入框,当输入框获取焦点后,点击回车,导致整个页面都刷新,问题解决办法. 1.处理form 在form中添加事件 <form onsubmit="retu ...
- 鼠标HOVER时区块动画旋转变色的CSS3样式掩码
鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...
- Android Edittext聚焦时输入法挡住了EditText输入框的两种解决方案
方案一.把整个布局文件用ScrollView套住.这样当你聚焦时虽然输入法也能够挡住一些输入框,但是你可以通过手动滑动看被挡住的内容. 方案二.在Activity中设置android:windowSo ...
- javascript鼠标双击时触发事件大全
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- 【jQeury】input输入框状态，input事件，blur事件，focus事件
//输入框正在输入时 $("#test1").on('input',function(){ alert('正在输入'); }) //输入框得到焦点时 $("#test2& ...
- js监听input等表单输入框的变化事件oninput
js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...
- 【五】jquery之事件（focus事件与blur事件）[提示语的出现及消失时机]
例题:当鼠标移动到某个文本框时,提示语消失. 当失去焦点时,如果该文本框有内容,保存内容.没有内容,则恢复最初的提示语句 <!DOCTYPE html> <html> < ...
随机推荐
- linux和Windows双系统让 Windows 把硬件时间当作 UTC
linux和Windows双系统让 Windows 把硬件时间当作 UTC Windows设置如下:开 始->运行->CMD,打开命令行程序(Vista则要以管理员方式打开命令行程序方可有 ...
- selenium无法定位元素问题
在用自动化测试工具selenium完成下载任务时,经常会遇到定位不到元素的情况,总结如下: 1.frame/iframe原因定位不到元素: 这个是最常见的原因,首先要理解下frame的实质,frame ...
- 实现人脸识别性别之路---open CV将图片显示出来
import cv2filename='E:\\tensorflow\\bu.jpg'#图片的地址 # face_cascade=cv2.CascadeClassifier('C:\\anconda3 ...
- BZOJ2668: [cqoi2012]交换棋子(费用流)
Description 有一个n行m列的黑白棋盘,你每次可以交换两个相邻格子(相邻是指有公共边或公共顶点)中的棋子,最终达到目标状态.要求第i行第j列的格子只能参与mi,j次交换. Input 第一行 ...
- 【VC++学习笔记三】控件自绘
MFC应用程序中,大部分的控件类型都已经被定制好了,即便是修改,也只是小范围内的修改,而很多情况下,我们又需要对界面进行特殊定制,这时,最好的办法就是用CWnd类进行派生,自己生成新的窗体,在WM_P ...
- JS数组去重的6种算法实现
1.遍历数组法 最简单的去重方法,实现思路:新建一新数组,遍历传入数组,值不在新数组就加入该新数组中:注意点:判断值是否在数组的方法"indexOf"是ECMAScript5 方法 ...
- RQNOJ PID496/[IOI1999]花店橱窗布置
PID496 / [IOI1999]花店橱窗布置 ☆ 题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序 编号 ...
- JS 中 this 与闭包的结合产生的问题
代码片段一: var name = "The Window"; var object = { name : "My Object", getNameFunc : ...
- ecshop微信通中微信自动登录的设置方法
ecshop微信通中微信自动登录的设置方法 来 源:共享世纪 作 者:网络 时间:2015-12-03 点击: 4017 注意:微信自动登录,必须同时满足两个条件: 第一.微信公众号必须是服务号经过认 ...
- iOS Core Animation具体解释（四）AutoLayout中的动画
原创blog.转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 http://blog.csdn.net/column/details/huang ...