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 字符串连接[性能比较]
May 10 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
浅析Jquery操作select
Dec 13 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
JS访问对象两种方式区别解析
Aug 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连接SQLServer2005方法及代码
2013/12/26 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
汽车销售顾问求职自荐信
2014/01/01 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
数学教师求职信范文
2015/03/20 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android
DQL数据查询语句使用示例
2022/12/24 MySQL