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 限制输入脚本大全
Nov 03 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
新手快速上手webpack4打包工具的使用详解
Jan 28 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 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
什么是MVC,好东西啊
2007/05/03 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
php实现encode64编码类实例
2015/03/24 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
序列化Python对象的方法
2020/08/01 Python
python如何绘制疫情图
2020/09/16 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
寄语十八大感言
2014/02/07 职场文书
高中军训感言1000字
2014/03/01 职场文书
运动会运动员赞词
2015/07/22 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书