js操作表单
0 Views 前端 with
本文字数:373 字 | 阅读时长 ≈ 2 min

js操作表单

0 Views 前端 with
本文字数:373 字 | 阅读时长 ≈ 2 min

本节主要讲述js操作表单

表单提交

type=“submit”

阻止默认事件

e.preventDefault()

js提交方式

1
2
3
var myForm = document.getElementById("myForm");

myForm.submit()

表单重置

<input type="reset" value="重置">

表单字段

elements:表单中所有表单元素的集合

1
2
3
4
5
6
7
8
9
10
<form id="myForm">
<input type="text" value="">
<input type="reset" value="重置">
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
1
2
3
var myForm = document.getElementById("myForm");

console.log(myForm.elements)

表单属性

表单方法

表单事件

当用户改变了当前字段的焦点,或者我们调用了blur()和focus()方法时,都可以额触发。但是change事件在不同表单控件中触发的次数会有所不同
对于<input><textarea></textarea>,当他们从获得焦点到失去焦点且value值改变时,才会触发change事件
对于<select>元素,只要用户选择了不同的选项,就会触发change事件

文本框脚本

选择文本事件

select()方法

1
2
3
4
5
6
7
8
9
10
<form id="myForm">
<input type="text" value="" id="txt" maxlength="10">
<input type="reset" value="重置">
<textarea></textarea>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
1
2
3
4
5
6
7
8
9
var myForm = document.getElementById("myForm");

myForm.elements[0].focus();

var textarea = myForm.elements[2];

textarea.addEventListener("select", function() {
console.log(textarea.value)
})

选择具体的文本

1
console.log(textarea.value.substring(textarea.selectionStart, textarea.selectionEnd))

选择部分文本

setSelectionRange

—未完待续

Dec 21, 2018