js untuk menyerlahkan kemahiran box_javascript input semasa-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

js untuk menyerlahkan kemahiran box_javascript input semasa

May 16, 2016 pm 03:44 PM

js Kotak masukan Serlahkan

本文实例讲述了js实现当前输入框高亮显示的方法。分享给大家供大家参考。具体如下：

这里演示利用JavaScript技术实现的当前输入框高亮显示代码，在很多的网页表单中，当用户鼠标点击文本框的时候，该文本框就会显示高亮状态，提醒用户输入，本例通过JAVAScript代码实现了这样一种效果。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-table-input-color-show-codes/

具体代码如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;当前输入框高亮显示&lt;/title&gt;
&lt;style&gt; 
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;}
&lt;/style&gt;
&lt;script type="text/javascript"&gt; 
window.onload = function ()
{
 var aInput = document.getElementsByTagName("input");
 var i = 0;
 for (i = 0; i &lt; aInput.length - 1; i++)
 {
  aInput[i].onfocus = function ()
  {
   this.className = "f-text-high"
  };
  aInput[i].onblur = function ()
  {
   this.className = "f-text"
  } 
 }
};
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
 &lt;h2&gt;用户登录&lt;/h2&gt;
 &lt;p&gt;&lt;label&gt;用户名：&lt;/label&gt;&lt;input class="f-text" type="text" /&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;密码：&lt;/label&gt;&lt;input class="f-text" type="password" /&gt;&lt;/p&gt;
 &lt;p&gt;&lt;label&gt;&lt;/label&gt;&lt;input class="f-btn" type="button" value="登 录" /&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Salin selepas log masuk

希望本文所述对大家的javascript程序设计有所帮助。

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn