当鼠标聚焦时输入框变色（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> < ...
随机推荐
- POJ 1610 Count the Colors
Count the Colors Time Limit: 2 Seconds Memory Limit: 65536 KB Painting some colored segments on ...
- 网络爬虫与web之间的访问授权协议——Robots
网站的管理者们通常会有这样一种心态:一方面期待百度.Google这样的搜索引擎来抓取网站的内容,另一方面又很厌恶其他来路不明的网络爬虫抓取自己的信息.正是因为这样,才有“好爬虫”.“坏爬虫”这样的说法 ...
- MD markdown入门
1.Headings: 2.Phrase emphasis *italic text* **Bold text** 3.Listing items (在文字之前添加 + , - 或者 * ) -ite ...
- js中迭代的常用几种方法
var arr = [1,3,2,5,3]; //forEach 两个参数,第一个为数组内容,第二个为数组下标arr.forEach(function(item,index) { console.lo ...
- tee---将数据重定向到文件，
tee命令用于将数据重定向到文件,另一方面还可以提供一份重定向数据的副本作为后续命令的stdin.简单的说就是把数据重定向到给定文件和屏幕上. 存在缓存机制,每1024个字节将输出一次.若从管道接收输 ...
- 51nod 最大子矩阵和
一个M*N的矩阵,找到此矩阵的一个子矩阵,并且这个子矩阵的元素的和是最大的,输出这个最大的值. 我们可以降维,枚举矩形的长,然后算出一个一维数组,然后就转化成了最大字段和问题 #include< ...
- android+myeclipse+mysql自定义控件下拉框的数据绑定
原创作品,允许转载,转载时请务必声明作者信息和本声明.http://www.cnblogs.com/zhu520/p/8031936.html 本人小白,那个大神看到有问题可指出,谢谢.... 这个是 ...
- jQuery UI炫酷雨滴落在水面上的波纹涟漪特效
raindrops是一款效果很炫酷的jQuery UI雨滴落在水面上的特效. 该特效模拟水滴从空中落入平静的水面上的效果. 通过參数能够设置水面波纹的大小,强度,波纹扩散的速度等等属性. 效果演示:h ...
- OpenCASCADE Job - 武汉中南
中南设计集团(武汉)工程技术研究院有限公司是中南工程咨询设计集团有限公司(以下简称“中南设计集团”)打造的工程技术研发和科研创新平台,为中南设计集团旗下全资子公司,于2018年2月成立.公司业务范围涵 ...
- win7中下mysql-5.6.22免安装配置
windows下mysql免安装配置 1. 下载mysql免安装压缩包 下载mysql-5.6.22-winx64.zip 解压到本地D:\mysql-5.6.22-winx64 2. 修改配置文件 ...