js控制输入框获得和失去焦点时状态显示的方法


Posted in Javascript onJanuary 30, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的气泡提示效果
May 31 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
React如何避免重渲染
Apr 10 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 #Javascript
js实现屏幕自适应局部代码分享
Jan 30 #Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 #Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 #Javascript
javascript中sort()的用法实例分析
Jan 30 #Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 #Javascript
javascript结合fileReader 实现上传图片
Jan 30 #Javascript
You might like
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php中日期加减法运算实现代码
2011/12/08 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
用JS控制回车事件的代码
2011/02/20 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
Python json模块使用实例
2015/04/11 Python
简述Python2与Python3的不同点
2018/01/21 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Python 3.8 新功能全解
2019/07/25 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
经营目标管理责任书
2014/07/25 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
小学毕业感言200字
2015/07/30 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python