js untuk menyerlahkan kemahiran box_javascript input semasa
May 16, 2016 pm 03:44 PM本文实例讲述了js实现当前输入框高亮显示的方法。分享给大家供大家参考。具体如下:
这里演示利用JavaScript技术实现的当前输入框高亮显示代码,在很多的网页表单中,当用户鼠标点击文本框的时候,该文本框就会显示高亮状态,提醒用户输入,本例通过JAVAScript代码实现了这样一种效果。
运行效果如下图所示:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-table-input-color-show-codes/
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>当前输入框高亮显示</title> <style> body,form,h2,p,input{margin:0;padding:0;} body{color:#4f4f4f;font:14px/1.5 \5fae\8f6f\96c5\9ed1;} form{width:400px;background:#fef4eb;border:2px solid #f60;padding-bottom:10px;overflow:hidden;zoom:1;margin:10px auto;} form h2{color:#fe791e;font-size:16px;background:#ffebd7;border-bottom:2px solid #f60;padding:5px 10px;} form p{float:left;clear:both;width:100%;height:31px;margin-top:10px;line-height:31px;} form label,form input{float:left;} form label{width:100px;height:31px;text-align:right;} form input{border:0;font-family:\5fae\8f6f\96c5\9ed1;background:url(input.png) no-repeat;} form .f-text,form .f-text-high{width:203px;height:31px;padding-left:5px;line-height:31px;} form .f-text-high{background-position:0 -31px;} form .f-btn{color:#fff;width:104px;height:31px;cursor:pointer;font-size:16px;background:#f60;line-height:31px;border-radius:5px;} </style> <script type="text/javascript"> window.onload = function () { var aInput = document.getElementsByTagName("input"); var i = 0; for (i = 0; i < aInput.length - 1; i++) { aInput[i].onfocus = function () { this.className = "f-text-high" }; aInput[i].onblur = function () { this.className = "f-text" } } }; </script> </head> <body> <form> <h2>用户登录</h2> <p><label>用户名:</label><input class="f-text" type="text" /></p> <p><label>密码:</label><input class="f-text" type="password" /></p> <p><label></label><input class="f-btn" type="button" value="登 录" /></p> </form> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS

Bagaimana untuk menggunakan JavaScript untuk melaksanakan carian masa nyata dan menyerlahkan hasil?

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok

Cara membuat carta candlestick saham menggunakan PHP dan JS

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta

Cara menggunakan JS dan Baidu Map untuk melaksanakan fungsi pemprosesan acara klik peta
