フォームアクション
取得
要素を取得します
方法の要素は、次のように分けることができます：
1.Documentオブジェクトが提供するページ要素の配置方法の一連
<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オブジェクトは、属性の形式を提供し
、現在のHTMLページのすべてのフォームのコレクションを取得するためのプロパティをHTMLページ内の現在のフォームオブジェクトのすべてをカプセル化するHTMLCollectionオブジェクトが返されました。
次のようにサンプルコードは次のとおりです。
<!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>構成要素を取得します。
HTMLFormElementオブジェクト要素プロパティは、
このプロパティは、取得したフォームのすべてのコンポーネントのコレクションを指定するために使用されます。
<!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>フォームアクション
テキストコンテンツを選択します
HTMLInputElementのHTMLTextAreaElementオブジェクトおよびオブジェクト（）メソッドを選択して提供するが、現在のテキストボックス内のすべてのテキストを選択するために使用されます。
<!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>