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网页关闭时提醒效果脚本
Oct 22 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
获取body标签的两种方法
Oct 13 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
jquery队列函数用法实例
Dec 16 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
详解angular2.x创建项目入门指令
Oct 11 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
信用卡效验程序
2006/10/09 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
详解php中反射的应用
2016/03/15 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
js读取本地文件的实例
2017/12/22 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
在Python中使用成员运算符的示例
2015/05/13 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
python基础知识小结之集合
2015/11/25 Python
Python程序退出方式小结
2017/12/09 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python数据化运营的重要意义
2019/11/25 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
个人收入证明范本
2014/01/12 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
小学生操行评语大全
2014/04/22 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
中考学习决心书
2015/02/04 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技