js操作表单

本节主要讲述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)

表单属性

  • disabled
  • form
  • name
  • readOnly
  • tabIndex
  • type
  • value

表单方法

  • focus()—–聚焦
  • blur()——-失去焦点

表单事件

  • blur
  • change
  • focus

当用户改变了当前字段的焦点,或者我们调用了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)
})

选择具体的文本

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

选择部分文本

setSelectionRange

—未完待续