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(一)jquery选择符 必备知识点
Nov 25 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
JavaScript实现筛选数组
Mar 02 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
一个简洁的多级别论坛
2006/10/09 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
php错误、异常处理机制(补充)
2012/05/07 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
PHP图片加水印实现方法
2016/05/06 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
通过实例学习Python Excel操作
2020/01/06 Python
python 连续不等式语法糖实例
2020/04/15 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python复合条件下的字典排序
2020/12/18 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
兼职学生的自我评价
2013/11/24 职场文书
人事档案接收函
2014/01/12 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python