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 的继承
Oct 01 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 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数组中的重复值的实现代码
2011/07/17 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
js对象的复制继承实例
2015/01/10 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python多进程控制学习小结
2018/10/31 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
使用Python实现画一个中国地图
2019/11/23 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
为你的html5网页添加音效示例
2014/04/03 HTML / CSS
自主招生自荐信范文
2013/12/04 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
歌舞青春观后感
2015/06/10 职场文书
2015年十月一日放假通知
2015/08/18 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android