HTML表单(Form)是HTML的一个重要部分,主要用于采集和提交用户输入的信息。Blabla网对表单有详细的介绍,这里不再重复。下面要介绍的是,如何用简单的Javascript语句对表单里文本框的默认值进行操作。
为了让用户知道文本框里应该填写什么,我们通常会给文本框一个默认值。为了方便用户,当用户的鼠标点击文本框,我们希望文本框里的默认值被清空;当用户的鼠标离开文本框,如果文本框是空的,我们希望把文本框的值设回默认值。要实现这些,我们要用到Javascript的事件触发。这里用到是:onFocus(聚焦,也就是鼠标点入文本框)和onBlur(模糊,也就是鼠标离开文本框)。
Javascript函数:
function clearDefault(el) {//清空
if (el.defaultValue==el.value) el.value = "";
}
function resetDefault(el){// 重设
if (el.value == '') el.value=el.defaultValue;
}
有了以上函数,我们就可以在表单的任意一个文本框里(text或者textarea)调用这两个函数:onFocus时调用clearDefault(this);onBlur时调用resetDefault(this)。例如:
<form>
Lastname: <input type="text" style="color:#666" name="lastname" value="你的姓"
onfocus="clearDefault(this)"; onblur="resetDefault(this);" />
<br /><br />
Firstname: <input type="text" style="color:#666" name="firstname" value="你的名"
onfocus="clearDefault(this);" onblur="resetDefault(this);" />
<br /><br />
个人简介:
<br /><br />
<textarea cols="60" rows="5" name="msg" onfocus="clearDefault(this);">
最多100个字,不含空格
</textarea>
</form>
分享到:
相关推荐
jQuery实现的文本框默认值感应鼠标动作: 本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能。 比如当文本框获取鼠标焦点的时候,默认值会被清空,当文本框没有输入内容,鼠标焦点离开的时候,又会...
主要介绍了javascript和jquery实现设置和移除文本框默认值效果代码,本文实现的是类似html5 placeholder(空白提示)一种效果,需要的朋友可以参考下
如何让文本框内的提示信息在激活文本框...所以应该让文本框更人性化一点,在focus时检查当前值是否为文本框的默认值,是则清空,否则保持不变,而在blur时检查文本框的内容是否为空,是则重置为默认值,否则保持不变。
3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 ...
3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 ...
默认值:false。 allowNegative :(布尔值)允许输入负数。 默认值:false。 min:(数字)可以输入到文本框中的最小值,如果设置为null,则任何数字均有效。 默认值:空 max:(数字)可以输入到文本框中的最大...
JavaScript计算某一天是星期几,文本框中是默认值 ,只要按此种格式输入日期时间,就可以推算出当天是星期几,一个简单的JS时间计算实例,运行本效果后,只需点击“计算”按钮即可显示效果,这样我们就能很快的知道...
* 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs = function() { // 判断浏览器类型 userAgent = navigator....
功能强大的JavaScript日历控件 最关键的,无偿的永久的提供给大家免费使用,含全部源代码。 功能简介: 一、更人性化,更全面的功能 大部分日期控件都具备这些功能,但是本日历控件做的更全面,更人性化,并且速度...
用编辑器来替换对应的文本框 如何配置FCKEDITOR? FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js 你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用...
d3plus-text 具有换行和自动字体大小缩放功能的智能SVG文本框。正在安装如果使用NPM,则npm install d3plus-text 。 否则,请下载。 您还可以将d3plus-text作为独立库或一部分进行。 支持ES模块,AMD,CommonJS和...
实例159 为文本框设置默认值 190 实例160 设置文本框的样式 191 实例161 文本域的滚动条 192 3.3 下拉列表的应用 193 实例162 省市级联动菜单 193 实例163 省市县级联动菜单 194 实例164 应用下拉列表选择所要联机的...
存储库是一个解压的扩展,加载它在选项页面中,将第一个文本框设置为 JavaScript 正则表达式字符串数组以匹配[removed] ,例如["."]将导致扩展注入所有页面通过弹出窗口启用扩展程序(单击右上角的图标) 成功注入...
标准的HTML上传表单为用户提供一个文本框和按钮来选择文件,选中的文件是随着form表单提交的。整个文件上传完成之后,下一个页面才会显示,并且不能对选择的文件做预设的文件检验,例如文件大小限制,文件类型限制。...
React input field 是一个为你处理输入组件的 react 组件演示: : ###特性类型 - 'default' 或 'withIcon' name - onChange 事件的标识符 (id) label - 要显示的标签value - 如果指定了默认值iconText -...
Angular.js angular-geopicker指令该指令支持纬度和经度的输入。...用法默认值35.021004,135.755608 clat = 35.021004 clng = 135.755608 精度= 6 sep =“,” rad =错误< input angular-geopicker > </
3 — 设置首选大小关系(每个字体大小的百分比)或保留默认值 基本界面(检测系统语言和英语和德语之间的变化) 4 — 快乐:) 10pt,标准化/5pt x 高度(印刷字体大小) 5 — 当您混合字体时,请根据
表单验证控件 支持文本框,密码框,下拉框,单选框,多选框,文本域以及对象等等的验证,包括必填,对比,正则等等验证 使用方法: 进行验证: $("#form").TsForm(); 清空表单: $("#form").TsFormReset(); 属性: minlength:...
文本框的默认值 (this.defaultValue)"> title换行 obj.title = "123
sdfs " 获得时间所代表的微秒 var n1 = new Date("2004-10-10".replace(/-/g, "/")).getTime() 窗口是否关闭 win.closed checkbox...