Form action
Gets the
Gets the element
Gets the elements of the way, can be divided into the following ways:
a series of methods positioning of page elements 1.Document object provides
<form id='myform' name='myform' class='login' action='#'></form>
<script>
var formId=document.getElementById('myform');
var formName=document.getElementsByName('myform');
var formClass=document.getElementsByClassName('login')[0];
var formElement=document.getElementsByTagName('form')[0];
var formId2=document.querySelector('#myform');
var formElement2=document.querySelectorAll('form')[0];
</script>2.Document object provides attribute forms
the property for obtaining a collection of all forms of the current HTML page returned HTMLCollection object that encapsulates all of the current form object in the HTML page.
Sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取表单元素</title>
</head>
<body>
<form action="#">
<input type="submit">
</form>
<form name="myform" action="#">
<input type="submit">
</form>
<script>
//获取当前HTML页面中所有的表单元素
console.log(document.forms);
//document.表单名称-有些新版本的浏览器不支持
console .log(document.myform);
</script>
</body>
</html>Gets the component elements
HTMLFormElement object elements property
This property is used to specify a collection of all the components of the acquired form.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取表单组件元素</title>
</head>
<body>
<form action="#">
<input type="text" name="username">
<input type="submit">
</form>
<script>
var form = document.forms[0];
console.log(form.elements);
</script>
</body>
</html>Form action
Select the text content
HTMLInputElement HTMLTextAreaElement objects and object provides select () method is used to select all text in the current text box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本内容的选择</title>
</head>
<body>
<form action="#">
<input type="text" id="username" value="请输入你的用户名">
<input type="submit">
</form>
<script>
// HTMLInputElement对象
var username = document.getElementById('username');
// 绑定获取焦点(focus)事件 - 失去焦点(blur)事件
username.addEventListener('focus',function(){
// select()方法 - 选择当前输入框中的所有文本内容(全选)
// username.select();
});
/*
select事件
* 只要选择对应元素的文本内容时被触发
* select()方法
*/
username.addEventListener('select',function(){
/*
HTMLInputElement对象
* selectionStart - 表示用户选中文本内容的开始索引值
* selectionEnd - 表示用户选中文本内容的结束索引值的下一个值
*/
console.log(username.selectionStart,username.selectionEnd);
var value = username.getAttribute('value');
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
});
</script>
</body>
</html>