js控制输入框获得和失去焦点时状态显示的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • JavaScript组件焦点与页内锚点间传值的方法

    JavaScript组件焦点与页内锚点间传值的方法

    本文实例讲述了JavaScript组件焦点与页内锚点间传值的方法.分享给大家供大家参考.具体分析如下: 上述的这两个小功能在一些新式的手机页面是很有用的. 如何光标放上输入框就触发事件,离开输入框就触发另一个事件呢?即使用户不输入任何东西-- 页间传值很简单,但在页内的锚点之间是如何传值呢? 一.基本目标 有一个页面,上面有一个输入框,一个超级链接,这两个东西是没有任何关联的, 只是因为功能不大,所以把两个功能合起来写 1.输入框功能 一旦把光标放上对话框背景就变成红色,一旦用户的鼠标点击其他地

  • javascript自动切换焦点控制效果完整实例

    本文实例讲述了javascript自动切换焦点控制的方法.分享给大家供大家参考,具体如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"><

  • JS实现方向键切换输入框焦点的方法

    JS实现方向键切换输入框焦点的方法

    本文实例讲述了JS实现方向键切换输入框焦点的方法.分享给大家供大家参考.具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox.当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • javascript实现按回车键切换焦点

    前段时间学习了 HTML 和 CSS,对这方面产生了兴趣,也开始学习了 javascript 高级编程(第三版),这些天也一直在学,刚刚学到事件和表单脚本的内容.前几天,老师让编写一段代码:是在 javascript 表单中,用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中.应用目前为止学到的知识试着编写代码,在编写的过程中遇到了几个难点:取模计算:在函数内部用 this 和 arguments 找到触发事件:使用 addHandler() 方法为事件添加事件处理程序.在老师

  • JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果

    本文实例讲述了JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果.分享给大家供大家参考,具体如下: 思路: 1.首先用把密码框用txt暂时替代,并赋上默认值 <input type="text" value="请输入密码" /> 2.当文本框获取焦点后,把默认值清空,把type改为password. 3.当文本框失去焦点后,把type改为txt,把默认值设为"请输入密码". JS代码: window.onload=functi

  • 使用JS取得焦点(focus)元素代码

    对于良好的用户体验来说,网站/web app的可访问性和可用性,以及功能 都是至关重要的. 当我们的网站运行良好/体验很好的时候,用户是意识不到的,但我们做得不好时他们肯定会感觉到. 应用程序的可用性和可访问性的一个重要组成部分是输入焦点(focus)的处理,但这又是开发人员常常会忽视的一点. 对输入焦点处理很差的一个例子: 在点击一个链接以后打开一个窗口,但却不将光标聚焦到窗口中的任何元素内. 甚至更糟的是: 聚焦到模态窗口中的某个元素,但在关闭以后焦点照样不返回. 理想情况下,在触发链接时会

  • Javascript中自动切换焦点实现代码

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test javascript</title> <script type="text/javascript"> window.onload = function() { var EventUtil = { addhandler:function

  • JavaScript焦点事件、鼠标事件和滚轮事件使用详解

    焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合.主要有: blur:元素失去焦点,不会冒泡: DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin: DOMFocusOut:同HTML事件blur,于DOM3遭废弃,选用focusout: focus:元素获得焦点,不回冒泡: focusin:获得焦点,与HTML事件focus等价,但会冒泡: focusout:失去焦点,与HTML事件b

  • JavaScript 回车 焦点切换

    复制代码 代码如下: <script language='javascript' for='document' event='onkeydown'> if(event&&event.srcElement){ srcEle=event.srcElement; if((event.keyCode||event.charCode)==13 && srcEle.tagName.toUpperCase()=='INPUT' && srcEle.type.t

  • js控制输入框获得和失去焦点时状态显示的方法

    本文实例讲述了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"&

  • JS实现输入框提示文字点击时消失效果

    本文实例讲述了JS实现输入框提示文字点击时消失效果.分享给大家供大家参考,具体如下: 在网页登陆框里的输入框里常常会看到提示你输入什么内容的字样颜色比较淡的,这个就是"文本框点击时文字消失,失去焦点时文字出现"这个效果:这个效果用个JS就可以完成,这个效果是做网站的人必备的JS代码:自己会写JS的写写也快,不会写的就需要代码收集以作备用,用到的时候就方便多了. 下面就是这个效果实现用到的JS代码: <script language="JavaScript" t

  • input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    input 输入框获得和失去焦点时隐藏或者显示文字我们先看下效果图 输入框默认状态:  输入框获取焦点状态:  大家可以看效果图的搜索输入框,默认显示着"用户名/Email"的提示,当这个 input 输入框获得焦点时,就自动清空等待用户输入,当用户啥也没输入就离开这个 input 输入框时,输入框内又再次显示"用户名/Email"的提示.是不是很常见?很多搜索.登录.表单都会用到这个效果,但是我看了N多个网站,有90%以上是这么实现的: 复制代码 代码如下: &l

  • jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

    jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

    本文实例讲述了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能.分享给大家供大家参考,具体如下: 最近都成为页面仔了,主要工作都放在了前段,以前总是写后台程序,对前端的一些技术 html,css,javascript ,虽然都懂一些,但要做出比较好看页面,还是有很大的差距的.最近就遇到了这样一个要求不是很高,但有点小清新风格的登录或注册页面,要求如下: 1. 在输入框中 如果没有内容,则显示提示:比如"请输入用户名" 2. 如果输入框获得焦点,则隐藏提示 3.

  • JS控制表格实现一条光线流动分割行的方法

    本文实例讲述了JS控制表格实现一条光线流动分割行的方法.分享给大家供大家参考.具体分析如下: 这是很漂亮的一个分割行的代码. 其实就是利用JS控制表格实现的一条七彩流光分割横线 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>js用单元格实现的七彩线条</tit

  • js仿土豆网带缩略图的焦点图片切换效果实现方法

    本文实例讲述了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/

  • js从输入框读取内容,比较两个数字的大小方法

    因为从输入框读取的内容是String类型的,所以直接比较的话,是用asc码来比较的,如果要比较数字的大小应该加上parseFloat, 比如: if(parseFloat(amnt1) < parseFloat(amnt2)){} 以上这篇js从输入框读取内容,比较两个数字的大小方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • js判断输入框不能为空格或null值的实现方法

    实例如下所示: var sno = $('#sno').val(); var sname = $('#sname').val(); if((sno.indexOf(" ") >= 0 || sno == null) || (sname.indexOf(" ") >= 0 || sname == null)){ alert('学号和名称不能为空格或null值'); return; }else{ } 以上这篇js判断输入框不能为空格或null值的实现方法就是

  • js 禁用只读文本框获得焦点时的退格键

    有时候难免会要用到只读的文本框,可今天发现只读文本框有一个缺陷,当鼠标焦点在文本框里面的时候按回退键(backSpace), 会退回到前一个页面,这个问题就有点烦恼了,用户又不清楚可不可以输入,他如果看到文本框想去改里面的东西,按一下,有可能前面所有填写的数据就会丢失.故此写了个方法,供大伙有需要时放入<script></script>,保管你称心如意. 复制代码 代码如下: document.documentElement.onkeydown = function(evt){ v

  • JS控制输入框内字符串长度

    复制代码 代码如下: // 获取字符串的字节长度function len(s) {s = String(s);return s.length + (s.match(/[^\x00-\xff]/g) || "").length;// 加上匹配到的全角字符长度} function limit(obj, limit) {var val = obj.value;if (len(val) > limit) {val=val.substring(0,limit);while (len(val

随机推荐