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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Vue 样式绑定的实现方法
Jan 15 Javascript
design vue 表格开启列排序的操作
Oct 28 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
利用static实现表格的颜色隔行显示
2006/10/09 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
基于jQuery的弹出框插件
2012/03/18 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
Python每天必学之bytes字节
2016/01/28 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Flask之请求钩子的实现
2018/12/23 Python
python实现多张图片拼接成大图
2019/01/15 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python两个list[]相加的实现方法
2020/09/23 Python
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
生产总经理岗位职责
2013/12/19 职场文书
求职毕业生自荐书
2014/02/08 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
个人承诺书格式
2014/06/03 职场文书
六一亲子活动总结
2014/07/01 职场文书
2015年重阳节主持词
2015/07/04 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
java开发双人五子棋游戏
2022/05/06 Java/Android