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 相关文章推荐
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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+mysql留言本源码
2009/11/11 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
php常用正则函数实例小结
2016/12/29 PHP
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
JS解析后台返回的JSON格式数据实例
2018/08/06 Javascript
Node 搭建一个静态资源服务器的实现
2019/05/20 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
用python实现百度翻译的示例代码
2018/03/09 Python
Python装饰器用法实例分析
2019/01/14 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
python ftplib模块使用代码实例
2019/12/31 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
仓库规划计划书
2014/04/28 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
迎国庆演讲稿
2014/09/05 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
2015年财政所工作总结
2015/04/25 职场文书
获奖感言范文
2015/07/31 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python