首頁 > 開發者 > JavaScript

JavaScript中文字框焦點時邊框變色

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！


例子

 代碼如下 複製代碼

function   appendit() 
  { 
  var   nodes   =   document.getElementsByTagName("INPUT"); 
  for   (var   i=0;   i<nodes.length;   i++) 
  { 
  var   ctype   =   nodes[i].getAttribute("type"); 
  if   (ctype   ==   'text') 
  { 
  nodes[i].onfocus   =   function   ()   {   this.style.backgroundColor='#33FF00';   } 
  nodes[i].onblur   =   function   ()   {   this.style.backgroundColor='#3366FF';   } 
  } 
  } 
  } 

測試：

<input type="text" size="36" name="title" />


再看一個例子

點擊邊框變色的文字框，滑鼠點擊文字框將要輸入的時候，文字框自動變色高亮顯示，非常有視覺效果，讓文字框變漂亮了許多

 代碼如下 複製代碼

<!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="textml; charset=utf-8" />
<title>輸入框點擊時邊框變色效果</title>
</head>
<body>
<script type="text/javascript">
// focusClass : 擷取焦點時的樣式
// normalClass : 正常狀態下的樣式
function focusInput(focusClass, normalClass) {
    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 = normalClass||''; };
        }
    }
}
</script>
<script type="text/javascript">
window.onload = function () {
    focusInput('focusInput', 'normalInput');
}
</script>
請輸入姓名：<input type="text" class="normalInput" />
<style type="text/css">
.normalInput {border:1px solid #ccc;}
.focusInput {border:1px solid #FFD42C;}
</style>
</body>
</html>

在Firefox下也有效，只不過Firefox和chrome下，這兩款瀏覽器預設會自動會輸入框添加點擊效果，所以有時候看不清，IE下表現突出。


把現在流行的基於jquery實現方法給各位介紹一個例子

 代碼如下 複製代碼

Html code:

<div class="fun">

   <h1>文字框聚焦清空預設值邊框變色，離開焦點添加預設值</h1>

   <div class="text">

               <input  type="text" class="inputText" value="2222" />

               <input  type="text" class="inputText" value="2222" />

               <input  type="text" class="inputText ss" value="82747" />

               <input  type="text" class="inputText" value="094727" />

               <input  type="text" class="inputText" value="249049" />       

               <input  type="text" class="inputText" value="333" />

               <input  type="text" class="inputText" value="82747" />

   </div>

</div>

Css code

:

這個是基於jquery庫的啊，請自己加上啊。

 代碼如下 複製代碼

<style type="text/css">

.fun{margin:0 auto;width:1000px;overflow:hidden;box-shadow:0 3px 6px rgba(0,0,0,0.1);border:solid 1px #ccc;font-family:Microsoft YaHei;overflow:hidden;}

.inputText{border:solid 1px #ccc;height:40px;width:200px;line-height:40px/9;padding:0 2px;box-shadow:inset 0 0 4px rgba(0,0,0,0.1);margin:10px 0;outline:none;font-family:arial;font-weight:700;text-indent:5px;color:#1C1C1C;display:inline-block;}

.inputText:focus{border:solid 1px #1398FF;box-shadow:0 0 5px rgba(0,192,255,0.4);}

.text{padding:15px 0 15px 75px;}

h1{text-align:center;padding:10px 0;margin:0;background:-webkit-linear-gradient(#fcfcfc,#f9f9f9) repeat;background:-moz-linear-gradient(#fcfcfc,#f9f9f9) repeat;border-bottom:solid 1px #ccc;font-weight:400;text-shadow:1px 1px 3px #fff;}/*Css3背景漸層*/

</style>

Js  code:

<script type="text/javascript">

// JavaScript Document

$(document).ready(function(){

function input()

{

//each遍曆文字框

$(".inputText").each(function(){

var $val=this.value;//儲存當前文字框的值

var $ss=$(".ss").val();

$(this).focus(function(){

//獲得焦點時，如果值為預設值，則清空文字框的值

if (this.value== $val){

this.value="";

}

});

$(this).blur(function() {

//失去焦點時，如果值為空白，則重新加上文字框預設值

if (this.value==""){

this.value=$val;

}

});

});

}

input();

})

</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More