當鼠標聚焦時輸入框變色（focus事件實例）

時間 2019-11-29

標籤鼠標聚焦輸入變色 focus 事件實例简体版

原文原文鏈接

圖片.png

當鼠標聚焦時輸入框變色
css相關,鼠標點擊<input>輸入域後出現有顏色的邊框
原理：css僞類之input輸入框鼠標點擊邊框變色效果
僞類元素的使用：:focusjavascript

一：當輸入框得到焦點時，改變它的背景色

效果圖：當鼠標聚焦時輸入內部填充色改變css

圖片.png

<!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>

==========================html

二：效果圖：當鼠標聚焦時外部border變色，css實現的方法：

實現點擊的時候出現藍色光暈前端

圖片.png

代碼：java

.inp:focus { border-style:solid; border-color: #03a9f4; box-shadow: 0 0 15px #03a9f4; } .inp:focus { border-style:solid; border-color: #03a9f4; box-shadow: 0 0 15px #03a9f4; }

js實現的方法：jquery

<!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後前端妹子，愛編程，愛運營，愛折騰。
堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。ui

文末福利：關注「編程微刊」公衆號，在微信後臺回覆「領取資源」，獲取IT資源200G乾貨大全。公衆號回覆「1」，拉你進程序員技術討論羣

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。