<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>formUtil.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<script type="text/javascript">
//innerText和innerHTML，outerText和outerHTML的区别
//<div><b>Hello</b> world</div>
//innerText是指Hello
//innerHTML是指<b>Hello</b> world
//outerText是指Hello world
//outerHTML是指<div><b>Hello</b> world</div>
//如何获得表单的引用
//第一种:var oForm = document.getElementById("form1");
//第二种:var oForm = document.forms[0];
//第三种:var oForm = documnet.forms["form1"];
//表单中字段的获得
//第一种:var eText = oForm.elements[0];
//第二种:var eText = oForm.elements["name"];
//第三种:var eText = oForm.textbook; 这个是根据元素的name属性获得
//第四种:var eText = oForm["sname"];
//document.getElementById();
//表单中字段的共性
//disabled,form(表单中的元素获得当前form),blur(),focus()
//focus到第一个非hidden字段
var FormUtil = new Object;
FormUtil.focusFirst = function(){
if(document.forms.length>0){
for(var i=0;i<document.forms[0].elements.length;i++){
var oField = document.forms[0].elements[i];
if(oField.type!="hidden"){
oField.focus();
//选择文本
//oField.select();
return;
}
}
}
};
//给文本字段加上select();
FormUtil.setTextboxes = function() {
var colInputs = document.getElementsByTagName("input");
var colTextAreas = document.getElementsByTagName("textarea");
for (var i=0; i < colInputs.length; i++){
if (colInputs[i].type == "text" || colInputs [i].type == "password") {
colInputs[i].onfocus = function () { this.select(); };
}
}
for (var i=0; i < colTextAreas.length; i++){
colTextAreas[i].onfocus = function () { this.select(); };
}
};
//自动切换到下一个
FormUtil.tabForward = function(oTextbox){
var oForm = oTextbox.form;
if(oForm.elements[oForm.elements.length-1]!=oTextbox && oTextbox.value.length==oTextbox.maxLength){
for (var i=0; i<oForm.elements.length; i++) {
if (oForm.elements[i] == oTextbox) {
for(var j=i+1; j < oForm.elements.length; j++) {
if (oForm.elements[j].type != "hidden") {
oForm.elements[j].focus();
return;
}
}
return;
}
}
}
};
window.onload = function(){
FormUtil.focusFirst();
FormUtil.setTextboxes();
};
//表单的提交
//<input type="image" src="sweat.gif">
//<input type="submit" src="Submit">
//oForm.submit();
//仅提交一次
//this.disabled = true;this.form.submit();
//选择文件select()
//<input id="my" type="text" name="" value="abc" onfocus="javascript:this.select();">
</script>
<body>
<form action="">
<input type="hidden" name="" value="">
信息:<input id="my" type="text" name="" value="abc" maxLength="10" onkeyup="javascript:FormUtil.tabForward(this);"><br/>
信息:<textarea rows="10" cols="30">abc</textarea>
<input type="image" src="sweat.gif">
</form>
</body>
</html>
分享到：
相关推荐
"javascript表单正则验证自定义提示"这一主题聚焦于利用正则表达式（Regular Expressions）进行表单验证，并通过自定义提示来优化用户交互。 正则表达式是一种强大的文本处理工具，它可以用来匹配、查找、替换和...
JavaScript 表单美化和验证插件是Web开发中不可或缺的一部分，尤其在构建用户友好且具有交互性的网页时。这类插件通常提供丰富的功能，以提升表单的视觉吸引力和用户体验，同时确保数据的有效性。本插件具备以下关键...
JavaScript表单编程是Web开发中的核心技能之一，它允许开发者获取用户在网页表单中输入的数据并进行验证，从而提供良好的交互体验。本章主要涵盖了以下几个关键知识点： 1. **脚本访问表单**： - 通过`document....
本文将深入探讨"javascript表单验证方式一"，介绍如何利用JavaScript进行表单验证，确保用户输入的数据符合预设规则，提高用户体验，同时也减轻了服务器端的压力。 首先，表单验证的基本目标是检查用户在HTML表单中...
总的来说，"javascript表单验证器三方库.zip" 提供了一个强大的工具，用于处理JavaScript表单验证，它具有可配置性、递归数据验证等特性，是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...
"JavaScript表单验证大全"这个主题涵盖了许多关于如何使用JavaScript有效地验证用户输入的重要概念。表单验证是确保用户提交的数据符合预设规则的关键步骤，它能防止无效数据进入数据库，提升用户体验，并减少服务器...
"强大JavaScript表单验证"这个主题旨在教你如何有效地利用JavaScript来确保用户提交的数据符合预期的格式和规则，从而提高网站的安全性和用户体验。 1. **表单验证的重要性**：在网页上，表单用于收集用户的个人...
首先，JavaScript表单验证的基本步骤包括： 1. **获取表单元素**：通过`document.getElementById`或`document.querySelector`等方法获取表单元素，例如`<input>`、`<select>`和`<textarea>`等。 2. **添加事件监听...
这个"JavaScript表单验证模板"是一个实用的工具，适合初学者学习和快速实现表单数据验证功能。表单验证是确保用户输入符合特定规则的关键步骤，它可以防止无效数据提交到服务器，提高用户体验，并减少服务器端处理...
总结来说，禁止用户在JavaScript表单中输入中文汉字可以通过监听输入事件，结合正则表达式进行判断来实现。这不仅可以提升用户体验，还能确保收集到的数据满足特定格式要求。在实际应用中，可以根据具体需求调整正则...
### JavaScript表单验证知识点详解 #### 一、前言 在Web开发中，表单验证是确保用户输入数据准确性和安全性的关键步骤。通过前端JavaScript进行初步的数据验证，可以极大地提高用户体验并减轻后端服务器的压力。本...
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
JavaScript表单验证类是Web开发中的重要组成部分，主要用于在用户提交数据前检查输入的有效性和完整性。这个类通常包含了各种验证规则，如非空检查、邮箱格式验证、手机号码验证等，确保用户输入的数据符合预设的...
1． 掌握JavaScript脚本的调用和基本语法； 2． 掌握JavaScript常用内置对象的基本应用； 3． 掌握BOM和window消息对话框的使用； 4． 掌握HTML DOM动态网页设计技术。
"JavaScript表单验证控制代码大全"是一个集成了多种表单验证技术和策略的资源集合，帮助开发者有效地确保用户输入的数据质量和安全性。下面我们将深入探讨这个主题，了解JavaScript如何对表单数据进行验证以及常见的...
javascript 表单事件处理方法详解 javascript 表单事件处理方法是指在表单中使用 javascript 语言来处理用户的输入信息，并对其进行验证和处理的方法。这些方法可以帮助开发者更好地控制表单的行为，提高用户体验和...
通过本文的介绍，你应该能够理解并实现基本的JavaScript表单验证。记住，验证是提高应用质量和用户体验的重要步骤。始终确保你的验证逻辑既严格又用户友好。 通过不断的实践和学习，你可以掌握更复杂的验证技巧，...
JavaScript表单验证控件Validator v1.05是一款用于网页前端数据验证的工具，它能够帮助开发者在用户提交表单前检查输入的数据是否符合预设的规则，从而提高用户体验并减少服务器端的压力。该控件通常包含一系列的...
Javascript 表单控件实例讲解 在本文中，我们将详细介绍了 javascript 表单控件实例的使用方法和实现原理，主要包括遍历表单的全部控件、通过控件名访问特定的控件、猎取表单内文本框的个数、修改表单的提交方法等...
总的来说，JavaScript表单验证是Web开发中的基础技能，它能够帮助开发者创建更加健壮、用户友好的应用程序。了解和掌握这些验证技巧，对于任何想要涉足前端开发的IT从业者来说都是至关重要的。通过实践和学习，你...