JavaScript的亮點

我儘量讓格顏色改變時，請單擊或側重於文本框，所以我這個js的功能，但它改變文本框顏色不是它的divJavaScript的亮點

<!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> 
    <title>test</title> 
    <style type="text/css"> 
    /* This is the CSS class to use when no focus is on the input control */ 
    .input_text 
    { 
     border:1px solid #c0c0c0; 
     padding:4px; 
     font-size:14px; 
     color:#000000; 
     background-color:#ffffff; 
    } 
    /* This is the CSS class to use when the control has focus */ 
    .input_text:focus, input.input_text_focus 
    { 
     border-color:#646464; 
     background-color:#ffffc0; 
    } 
    </style> 
    <script type="text/javascript"> 
    // creates a function to set the css class name of input controls when they 
    // receive or lose focus. 
    setAspnetTextFocus = function() { 
     // CSS class name to use when no focus is on the input control 
     var classBlur = 'input_text'; 
     // CSS class name to use when the input control has focus 
     var classFocus = 'input_text_focus'; 
     // get all of the input tags on the page 
     var inputElements = document.getElementsByTagName('input'); 

     for (var i = 0; i < inputElements.length; i++) { 
      inputElements[i].onfocus = function() { 
       if (this.className == 'input_text') { 
        this.className += ' ' + classFocus; 
       } 
      } 
      // add the onblur event and set it to remove the on focused CSS class when it loses focus 
      inputElements[i].onblur = function() { 
       this.className = this.className.replace(new RegExp(' ' + classFocus + '\\b'), ''); 
      } 
     } 
    } 
    // attach this event on load of the page 
    if (window.attachEvent) window.attachEvent('onload', setAspnetTextFocus); 
    </script> 
</head> 
<body> 
<div class="input_text" > 
<input type="text" id="TextBox1" class="input_text" /> 
</div> 
</body> 
</html>

什麼想法？

來源

2011-05-23 ALY

要更改文本選擇顏色，您只需要CSS。除非沒有那麼漂亮的黑客（您需要在選擇的上方/下方的文字上繪製矩形），否則您將無法使用JavaScript來執行此操作。）

使用CSS tho您只需要執行操作（我相信）：

#TextBox1::selection { 
     background: #ffb7b7; /* Safari */ 
     } 
#TextBox1::-moz-selection { 
     background: #ffb7b7; /* Firefox */ 
}

來源：http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

萬一一個側面說明壽你關心，這不是W3C CSS驗證。

來源

2011-05-23 21:14:50

這裏是使用JQuery一個的jsfiddle，會做什麼，我認爲你所要求的：http://jsfiddle.net/pthurlow/GG6Te/

在這裏它是在普通的香草JS：http://jsfiddle.net/FSZZU/

編輯從的jsfiddle代碼：

html

<div class="input_text"> 
    <input type="text" id="TextBox1" class="input_text" /> 
</div>

腳本

document.getElementById('TextBox1').onfocus = function() { 
    this.parentNode.className = 'input_text focus_text'; 
}; 
document.getElementById('TextBox1').onblur = function() { 
    this.parentNode.className = 'input_text'; 
};

來源

2011-05-23 21:22:44 pthurlow

我不認爲他使用jQuery壽 – 2011-05-23 21:24:43

啊，編輯剛剛的JavaScript以及 – pthurlow 2011-05-23 21:32:12

你可能會考慮直接包括代碼到你的答案，*與*外部的jsfiddle鏈接。這樣我們就可以保持答案的真實性，外部鏈接是對你的答案的補充。特別是當代碼相對簡短時。 – Matt 2011-05-24 14:27:59

JavaScript的亮點

回答

相關問題