表单脚本
- 通过点击提交按钮提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。
- 在JavaScript中，以编程方式调用submit()方法也可以提交表单，以编程方式提交表单时，不会触发submit事件，因此要记得在调用此方法之前先验证表单数据。
- 提交表单时可能出现的最大问题，就是重复提交表单。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作。
- 与提交表单一样，也可以通过JavaScript来重置表单，但不同之处是，调用reset()方法会像单击重置按钮一样触发reset事件。
- 重置表单的需求很少见。更常见的做法是提供一个取消按钮，让用户能够回到前一个页面。而不是不分青红皂白地重置表单中的所有值。
- 使用focus()方法，可以将用户的注意力吸引到页面中的某个位置。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。在早期Web开发中，那时候的表单字段还没有readonly特性，就可以使用blur方法来创建只读字段。
- 对于input和textarea元素，当它们从获得焦点到失去焦点且value值改变时，才会触发change事件。对于select元素，只要用户选择了不同的选项，就会触发change事件。(P418)
- 对于文本框，size特性，可以指定文本框中能够显示的字符数。通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接收的最大字符数。
- 无论文本框与多行文本框在标记上有什么区别，但它们都会将用户输入的内容保存在value属性中。同时两种文本框都支持select()方法，这个方法用于选择文本框中的所有文本。(P422)
- tabIndex特性表示当前字段的切换(tab)序号。
- 响应向文本框中插入字符的操作是keypress事件。可以通过阻止这个事件的默认行为来屏蔽掉某类字符。(P424)
12345
//屏蔽非数值按键if (!/d/.test(String.fromCharCode(charCode)) && charCode > 9 &&!event.ctrlKey){EventUtil.preventDefault(event);} - 使用JavaScript可以从多方面增强表单字段的易用性。最常见的一种方式就是在用户填写完当前字段时，自动将焦点切换到下一个字段。通常在自动切换焦点之前，必须知道用户已经输入了限定长度的数据。
1234567891011121314151617181920212223
(function(){ function tabForward(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (target.value.length == target.maxLength){ var form = target.form; for (var i=0, len=form.elements.length; i < len; i++) { if (form.elements[i] == target) { if (form.elements[i+1]){ form.elements[i+1].focus(); } return; } } } } var textbox1 = document.getElementById("txtTel1"); var textbox2 = document.getElementById("txtTel2"); var textbox3 = document.getElementById("txtTel3"); EventUtil.addHandler(textbox1, "keyup", tabForward); EventUtil.addHandler(textbox2, "keyup", tabForward); EventUtil.addHandler(textbox3, "keyup", tabForward); })(); - 随着Ajax的出现，表单序列化变得越来越普遍。在JavaScript中，可以利用表单字段的type属性，连同name和value属性一起实现对表单的序列化。在表单提交期间，浏览器是如何将数据发送给服务器的:
- 对表单字段的名称和值进行URL编码，使用&分隔。
- 不发送禁用的表单字段
- 只发送勾选的复选框和单选框
- 不发送type为”reset”和”button”的按钮
- 多选选择框中的每个选中的值单独一个条目
- 单击提交按钮提交表单的情况下，也会发送提交按钮；否则，不发送提交按钮
- select元素的值，就是选中的option元素的value特性的值。如果option元素没有value特性，则是option元素的文本值。
- 富文本编辑，又称为WYSIWYG(What You See Is What You Get，所见即所得)。这一技术的本质，就是在页面中嵌入了一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面body元素的HTML代码。designMode属性有两个可能的值:”off”(默认值)和”on”。在设置为”on”时，整个文档都会变得可以编辑(显示插入符号)，然后就可以像使用文字处理软件一样。
- designMode属性需要在页面完全加载后才能设置，因此，在包含页面中，需要使用onload事件处理程序在恰当的时刻设置designMode。(P438)
- 另一种编辑富文本内容的方式是使用名为contenteditable的特殊属性，可以把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。
- 操作富文本，富文本选取以及表单与富文本相关内容可以看P439页面。
原文地址：https://www.cnblogs.com/chinatrump/p/11597031.html
时间： 2024-10-13 05:19:17