jS実現テキストボックスクリック時に変色
1938 ワード
ホームページの上でデフォルトのテキストの枠はいつも灰色の風格で、見るのはすべて少しいらいらして、CSSとJSでその様式を変えるのはみんながすべて好きな方法で、今日1つのクリックの枠の変色のテキストの枠を書いて、マウスがテキストの枠をクリックして入力する時、テキストの枠は自動的に変色してハイライト表示して、とても視覚の効果があって、テキストの枠をきれいにしました.HTMLコードは次のとおりです.
火狐の下でも有効ですが、火狐とchromeの下では、この2つのブラウザはデフォルトで自動的に入力ボックスにクリック効果を追加するので、見えないことがあり、IEの下で際立っています.フロントエンドフレームの例
<!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>火狐の下でも有効ですが、火狐とchromeの下では、この2つのブラウザはデフォルトで自動的に入力ボックスにクリック効果を追加するので、見えないことがあり、IEの下で際立っています.フロントエンドフレームの例