当鼠标聚焦时输入框变色（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> < ...
随机推荐
- 硬件时间，操作系统时间，Windows 和linux 双系统时间差8小时问题说明
1.硬件时间:硬件时钟是存储在主板上CMOS里的时间即BIOS时间,关机后该时钟依然运行,主板的电池为它供电.对应于嵌入式设备有一个RTC模块.硬件时钟即RTC时钟.信息比较少没时区.夏令时的概念. ...
- 大吉大利，晚饭吃鸡！——accept关闭问题
假期收尾了,学芽子们都军训了.一群张一山和周冬雨在校内晃晃悠悠,说起来春风十里也就军训比较有意思.对于我这种一年追一部剧的人,显然是有点对不住.在我假期任务即将圆满之际,我开始放慢脚步寻找生活的美妙时 ...
- 洛谷 P1013 进制位
P1013 进制位 题目描述 著名科学家卢斯为了检查学生对进位制的理解,他给出了如下的一张加法表,表中的字母代表数字. 例如: + L K V E L L K V E K K V E KL V V E ...
- {head first} --- networking 3
Chapter 10 无线网络 续 .. Chapter 11 网络安全 Chapter 12 设计网络 涉及到物理的设计网络布局等.我没细看. 附录
- centOS6.3(64bit)Hadoop的Eclipse开发环境搭建
操作系统centos6.3(64位) 一个namenode 两个datanode Hadoop版本号:hadoop-1.1.2 Eclipse版本号:eclipse-standard-kepler-S ...
- 操作excel脚本练习
# -*- coding: utf-8 -*- import xlrd import xlwt import sys from xlwt import * from xlrd import open_ ...
- jquery中最常用的API有哪些
jquery中最常用的API有哪些 一.总结 一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...
- Highcharts使用的一些总结
Highcharts 是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用. ...
- 03009_SQL注入问题
1.注入问题 (1)假设有登录案例SQL语句如下: SELECT * FROM 用户表 WHERE NAME = 用户输入的用户名 AND PASSWORD = 用户输的密码; (2)此时,当用户输入 ...
- AtomicInteger类
今天写代码.尝试使用了AtomicInteger这个类,感觉使用起来非常爽,特别适用于高并发訪问.能保证i++,++id等系列操作的原子性. ++i和i++操作并非线程安全的.非常多人会用到synch ...