Home > Article > Web Front-end > DOM form operations in javascript (with code)
DOM form operations in javascript (with code)
- 不言Original
- 2018-09-04 10:00:261641browse
What kind of operations can be performed on the form in the DOM, and what are the methods of operation? This article will share with you DOM form operations in JavaScript. The content is very detailed, let’s take a look.
1. Get the form
Get the form element
Use the forms attribute in the Document object Get the collection of all forms in the current HTML page
Use the name attribute value of the form in the Document object to get the table unit element
<body> <form action="#"> <input type="submit"> </form> <form name="mylove" action="#"> <input type="submit"> </form> <script> console.log(document.forms); // 获取当前HTML页面所有表单元素 console.log(document.mylove); // document表单名称-有些新浏览器是不支持 </script> </body>
Get the form component element
Use the HTMLFormElement object The elements attribute to obtain the collection of form components
<body> <form action="#"> <input type="text" name="username"> <input type="submit"> </form> <script> var form = document.forms[0]; console.log(form.elements); </script> </body>
2. Form operation
Selection of text content
Use the select() method in the HTMLElement object and HTMLTextAreaElement object to obtain the contents of all text boxes in the text box
<body>
<form action="#">
<input type="text" id="username" value="请输入你用户名">
<!---->
<input type="submit">
<!--定义提交按钮-->
</form>
<script>
var username = document.getElementById(username);
// 获取ID属性
username.addEventListener('focus',function(){
username.select();
})
username.addEventListener('select',function () {
console.log(username.selectionStart.username.selectionEnd);
var value = username.getAttribute('value');
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
})
</script>
</body>
Set the text content
New in HTML5 In the setSelectionRange() method, get the text content of a focused text box
body>
<form action="#">
<input type="text" id="username" value="请输入你用户名">
<!---->
<input type="submit">
<!--定义提交按钮-->
</form>
<script>
var username = document.getElementById(username);
// 获取ID属性
username.addEventListener('focus',function(){
username.select();
})
username.addEventListener('select',function () {
console.log(username.selectionStart.username.selectionEnd);
var value = username.getAttribute('value');
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
})
</script>
</body>
Operation clipboard
Use copy; cut, paste to set the operation clipboard Copy, cut and paste
<body>
<form action="#">
<input type="text" id="username" value="请输入你用户名">
<input type="text" id="username1">
<input type="submit">
</form>
<script>
var username = document.getElementById('username');
username.addEventListener('copy',function (event) {
var data = event.clipboardData || window.clipboardData;
console.log(data);
console.log('这是复制操作');
var value = username.value;
var result = value.substring(selectionStart,username.selectionEnd);
console.log(result);
data.setData('text',result);
});
username.addEventListener('cut',function () {
console.log('这是个剪切操作');
});
var username1 = document.getElementById('username1');
username1.addEventListener('paste',function (event) {
event.preventDefault();
var data = event.clipboardData || window.clipboardData;
var result = data.getData('text');
/*得到DataTransfer对象
* geData()方法-获取数据内容*/
if (result === '用户名') {
result ='***';
}
username1.value = result;
})
</script>
</body>
The operations of the drop-down list
are created with select and option objects and provide some properties and methods
<form action="#">
<select id="yx">
<option id="dj" value="dj">单机</option>
<option value="wy">网页</option>
<option value="dy">端游</option>
</select>
<select id="cyx1" multiple size="5">
<option value="dj">单机</option>
<option value="wy">网页</option>
<option value="dy">端游</option>
</select>
</form>
<script>
var yx = document.getElementById('yx');
// HTMLSelectElement对象
console.log(yx.length);
console.log(yx.options);
console.log(yx.selectedIndex);// 被选中<option>的索引值
// 属性
var yx1 = document.getElementById('yx1');
// size属性默认值是 0
console.log(yx1.size);
console.log(yx1.item(1));
yx1.remove(2);
var dj = document.getElementById('dj');
console.log(dj.index);
console.log(dj.selected);
console.log(dj.text);
console.log(dj.value);
</script>
3. Form validation
Use checkValidity() if there is no verification problem with the element value, it will be true, if not, it will return false
Use setCustomValidity() message) will customize an error message for the element. If set, the element is not invalid and will display
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
var username = document.getElementById('username');
username.addEventListener('blur',function () {
var value = username.value;
if (value === '' || value === undefined || vaiue === null) {
console.log('请输入你用户名');
}
});
</script>
</body>
4. Form submission
submit event
Use submit to submit the form
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
var form = document.forms[0];
form.addEventListener('submit',function (event) {
console.log('该表单已被提交');
});
</script>
</body>
submit() method
Use submit to submit the form, and use Use any ordinary button to complete the submission
<body>
<form action="#">
<input type="text" id="username">
<input id="qyc" type="button" value="提交">
</form>
<script>
var qyc = document.getElementById('qyc');
qyc.addEventListener('click',function () {
var form = document.forms[0];
form.submit();//提交表单
});
</script>
</body>
Related recommendations:
JavaScript and jQuery DOM operations
JavaScript DOM The essence and operation method
The above is the detailed content of DOM form operations in javascript (with code). For more information, please follow other related articles on the PHP Chinese website!