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不同页面传值的改进版
Sep 30 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
jquery二级目录选中当前页的css样式
Dec 08 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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 数组教程 定义数组
2009/10/23 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
Javascript事件实例详解
2013/11/06 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
node.js入门教程
2014/06/01 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
Python定时执行之Timer用法示例
2015/05/27 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python安装whl文件过程图解
2020/02/18 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
欢送退休感言
2014/02/08 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
幼儿园2016年感恩节活动总结
2016/04/01 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript