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 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
js常用代码段整理
Nov 30 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
Javascript动画效果(2)
Oct 11 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
详解Vue的mixin策略
Nov 19 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
wxPython中文教程入门实例
2014/06/09 Python
Python while 循环使用的简单实例
2016/06/08 Python
详解python基础之while循环及if判断
2017/08/24 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
详解python:time模块用法
2019/03/25 Python
python用match()函数爬数据方法详解
2019/07/23 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
Python 实现向word(docx)中输出
2020/02/13 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Ajax和javascript的区别
2013/07/20 面试题
面包店的创业计划书范文
2014/01/16 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
会计毕业生自荐书
2014/06/12 职场文书
2016高考感言
2015/08/01 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技