这篇文章主要介绍了 js 控制输入框获得和失去焦点时状态显示的方法, 可实现判断输入框的焦点状态设置不同样式的功能, 是非常实用的技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 控制输入框获得和失去焦点时状态显示的方法。分享给大家供大家参考。具体实现方法如下:
- <!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="text/html; charset=gb2312" />
- <title>
- 边框变色
- </title>
- <style type="text/CSS">
- <!-- .SearchKeyword {border:1px solid #797A75;width: 202px;color: #CDCDCD;font-size:12px;}
- .SearchKeywordonFocus {border:1px solid #ABCD3A;width: 202px;color: #000000;font-size:12px;}
- -->
- </style>
- <script language="javascript">
- function keywordfocus() {
- if (document.formSearch.keyword.value == '请输入关键字') {
- document.formSearch.keyword.value = '';
- document.formSearch.keyword.className = 'SearchKeywordonFocus';
- }
- }
- function keywordblur() {
- if (document.formSearch.keyword.value == '') {
- document.formSearch.keyword.value = '请输入关键字';
- document.formSearch.keyword.className = 'SearchKeyword';
- }
- }
- </SCRIPT>
- </head>
- <body>
- <form id="formSearch" name="formSearch" method="post" action="">
- <input type="text" name="keyword" class="SearchKeyword" value="请输入关键字"
- onFocus="keywordfocus();" onBlur="keywordblur();" />
- </form>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: