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匿名函数应用示例介绍
Mar 07 Javascript
javascript基于HTML5 canvas制作画箭头组件
Jun 25 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
js实现模糊匹配功能
Feb 15 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
使用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/01/04 PHP
php简单的上传类分享
2016/05/15 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python线性回归实战分析
2018/02/01 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
YUV转为jpg图像的实现
2019/12/09 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
啤酒销售实习自我鉴定
2013/09/24 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
C++程序员求职信范文
2014/04/14 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
故意伤害辩护词
2015/05/21 职场文书
入团申请书格式
2019/06/20 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB