第63节 Form表单-Web前端开发之JavaScript-王唯

本内容为《Web前端开发视频》课件，请配合大师兄《》视频课程学习。

在 HTML 中，表单由元素表示，该元素与其他各种表单输入元素相关，例如， value: -one 多选列表: value: -自定义按钮: ... value: 自定义非提交按钮: .. value自定义重置按钮：..值重置自定义提交按钮：..值

另外， 和 的 type 属性可以动态修改，而元素的 type 属性是只读的； 示例：密码框的明文和密文：

span.icon-eye{
display: inline-block; width:24px; height: 24px;
background: url("images/eye.png") no-repeat; cursor: pointer;
}
span.icon-eye-invisible{
background-position: -24px 0;
}


cript>
var iconEye = document.querySelector("span.icon-eye");
iconEye.addEventListener("click", function(event){
var p = document.getElementsByTagName("p")[0];
var pwd = document.getElementById("pwd");
if(p.classList.toggle("icon-eye-invisible")){
pwd.type = "text";
}else{
pwd.type = "password";
}
},false);
cript>

示例：在弹出窗口中提交表单

cript>
function popupSend(oForm){
if(oForm.method && oForm.method.toLowerCase() !== "get"){
alert("只允许GET方式提交");
return;
}
var oField, sFieldType, nFile, sSearch = "";
for(var i = 0; i < oForm.elements.length; i++){
oField = oForm.elements[i];
if(!oField.hasAttribute("name"))
continue;
// sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.type.toUpperCase() : "TEXT";
if(sFieldType === "FILE"){
for(nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
}else{
sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
}
}
open(oForm.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oForm.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
}
cript>

First Name:

Last Name:

Password:

Photo：

Male
Female
自行车

汽车


cript>
var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", function(e){
popupSend(this);
e.preventDefault();
})
cript>

常见的表单控制方法：

每个表单元素都有两个方法：focus()和blur()； 其中，focus()方法用于获取焦点，即激活表单元素，使其能够响应键盘事件，如：

window.onload = function(e){
document.forms[0].elements[0].focus();
}

默认情况下，只有表单元素可以获得焦点； 对于其他元素，可以将其设置为-1，然后调用 focus() 方法使这些元素获得焦点；

HTML5 为表单控件添加了一个新属性。 在支持该属性的浏览器中，只要设置了该属性，就可以将焦点自动转移到对应的控件上，如：

如果HTML中已经为该元素设置了该属性，则无需在其中调用focus()，因此在调用focus()之前需要检查该属性是否设置，如：

window.addEventListener("load", function(event){
var element = document.forms[0].elements[0];
if(element.autofocus !== true){
element.focus();
console.log("Js focus");
}
});

Blur() 方法：移除元素的焦点；

focus()方法的相反是blur()方法，它从元素上移除焦点； 当blur()被调用时，它不会将焦点转移到特定的元素上，它只是将焦点转移到调用此方法的元素上而已，如：

document.forms[0].elements[0].blur();

常见表单元素事件：

当用户与表单元素交互时，通常会触发鼠标、键盘或其他常规事件（例如 HTML）。 此外，表单元素还支持以下三种事件：