JS-表单元素操作
2021-04-10 09:25
标签：selected 域名 tor query 后台 value 特性 密码 doc 表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等， 用于采集用户的输入或选择的数据 使用input方式，必须添加type，设置为“text”。 name( 后台可以根据name属性获得输入框中的value的值) size特性:可以指定文本框内能够显示的字符数。 value属性:可以设置文本框的初始值。 maxlength特性:则是用于指定文本框内可以接受的最大字符数 textarea的初始值则必须放在开始和结束标签之内。 name( 后台可以根据name属性获得输入框中的value的值)， rows是文本框字符行数； cols是文本框字符列数； 不能在HTML中给textarea指定最大字符数； 获得文本框中的值和设置文本框中的值：value属性可以获得和设置文本框的值 *多行文本域的初始值 必须写在 textarea>/textarea>标签之间* 上述两种文本框都支持 select()方法，这个方法主要用于选择文本框中的所有文本。不接受任何参数 与这个方法对应的select事件，在选择了文本框中的文本时事件触发 触发select事件 一般情况下只有用户选择了文本，就会触发select事件； 在调用select()方法时也会触发； 取得选择的文本 HTML5 中添加了两个属性：selectionStart 和 selectionEnd。它们保存的是被选中的文本字符的下标（字符串本身就是一个字符数组），也就是表示所选择文本的范围（文本选区开头与结尾的偏移量）。 input>标记中有两种选择框 单选框: input type="radio"> 复选框: input type=“checkBox"> checked属性 : 选择框是否被选中 true/选中 ：false/未选中 JS-表单元素操作 标签：selected 域名 tor query 后台 value 特性 密码 doc 原文地址：https://www.cnblogs.com/-Archenemy-/p/12431492.html表单元素操作
获取表单
//获得表单的方式有3种
//1 利用表单在文档中的索引或表单的name属性来引用表单
let formList = document.forms;
//获得表单的集合
let formObj =formList[1];
let formObj = formList[‘表单name名称‘];
// 通过表单的索引来说的表单对象 或者 表单的name属性来引用表单
//2 利用表单的id属性来引用表单
let formObj = document.getElementById("表单id值");
//3 使用document.表单名来引用表单（最常用的）
let formObj = document.表单name属性值;
获得表单域元素
//获得表单域的方式的方式有三种
//1 利用表单域在表单域集合中的索引或表单域的name属性来引用表单域
let formObj =document.表单name属性值;
//获得表单对象
let elsList = formObj.elements
//获得表单域（表单元素）集合
let ele = elsList[1];
let ele = elsList[表单元素name属性值]
//通过元素在表单中的位置(只算表单元素，从0开始) 或者 表单的name属性值
//2 利用表单域的id属性来引用表单域
let selectObj = document.getElementById(‘表单域中id属性的值‘);
//3 使用表单.表单域名来引用表单域 (推荐)
let selectObj = document.表单的name属性.表单域元素的name属性;
// 如果name的值相同 则 返回一个元素的数组，例如复选框
对文本框元素进行脚本编写
1.使用 input> 元素表现单行文本框。
2.使用 textarea> 元素表现多行文本框
选择文本/onselect事件
复选框和单选框进行脚本编写
//操作单选框和复选框 主要是 操作他们的 checked 属性
let checkboxList = document.querySelectorAll("input[type=‘checkbox‘]");
//获得复选框对象集合
//查看选中的元素
for(let checkboxObj of checkboxList){
if(checkboxObj.checked){
//查看复选框的状态是否被选中，单选框的查看方式相同
console.log("被选中");
}
}
//设置全选
for(let checkboxObj of checkboxList){
checkboxObj.checked = true;
//通过使checked为true 来达到选中的效果
}
列表框和组合框进行脚本编写
//下拉菜单 select
//1 单选的下拉菜单
//2 多选的下拉菜单,添加multiple属性
//获得下拉菜单对象
let selectObj = document.querySelector("#select");
//单选下拉
let selectsObj= document.querySelector("#selects");
//多选下拉
// 通过options 属性来获得该下拉菜单的选中对象集合(数组)
let optionList = selectObj.options;
//单选下拉的option集合
let optionsList = selectsObj.options;
//多选下拉的option集合
//单选下拉菜单 一般和 change事件一起使用
selectObj.onchange=()=>{
let index = selectObj.selectedIndex;
//获得选中选项卡的下标
}
//下拉框中的option是否被选择 selected
let optionsList = selectsObj.options;
for(let optionObj of optionsList ){
if(optionObj.selected){
//optionObj.selected 如果被选中则返回true 每选择返回false
}
}