分享一款利用javascript 文本框(input)获取焦点(onfocus)时样式改变的一种方法，其实很简单只要判断onfocus就动态改变当前input的样式名就KO了。
| 代码如下 |
|
|
<script type="text/javascript">
// 说明：文本框(input)获取焦点(onfocus)时样式改变的实现方法
// 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>
|
html代码
| 代码如下 |
|
|
<style type="text/css">
.normalInput {
border:1px solid #ccc;
}
.focusInput {
border:1px solid #FFD42C;
}
</style>
<script type="text/javascript">
window.onload = function () {
focusInput('focusInput', 'normalInput');
}
</script>
文本框：<input type="text" class="normalInput" />
|
好了正同看完整的实例
| 代码如下 |
|
|
<div class="demo-container">
<!--************************************* 实例代码开始 *************************************-->
<style type="text/css">
.normalInput {
border:1px solid #ccc;
}
.focusInput {
border:1px solid #FFD42C;
}
</style>
<script type="text/javascript">
<!--
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||''; };
}
}
}
window.onload = function () {
focusInput('focusInput', 'normalInput');
}
//-->
</script>
<br />
文本框：<input type="text" class="normalInput" />
<br /><br />
<!--************************************* 实例代码结束 *************************************-->
</div>
|
