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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
Save a File Using a File Save Dialog Box
Jun 18 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
JS中操作JSON总结
Dec 06 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
动态加载js的方法汇总
Feb 13 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 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
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
Jquery实现简单的动画效果代码
2012/03/18 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
Python的Django框架中if标签的相关使用
2015/07/15 Python
python线程中同步锁详解
2018/04/27 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python I/O与进程的详细讲解
2019/03/08 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
公司门卫的岗位职责
2014/02/19 职场文书
党员群众路线承诺书
2014/05/20 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
防暑降温通知书
2015/04/27 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
如何有效防止sql注入的方法
2021/05/25 SQL Server
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫