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 相关文章推荐
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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/07/07 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
js定时器的使用(实例讲解)
2014/01/06 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
canvas知识总结
2017/01/25 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python如何实现异步调用函数执行
2019/07/08 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
全球立体声:World Wide Stereo
2018/09/29 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
JPA面试常见问题
2016/11/14 面试题
电子技术专业中专生的自我评价
2013/12/17 职场文书
软件项目开发计划书
2014/05/01 职场文书
高一新生军训方案
2014/05/12 职场文书
端午节演讲稿
2014/05/23 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
收入证明范本
2015/06/12 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python