Welche Operationen können auf dem Formular im DOM ausgeführt werden und welche Operationsmethoden gibt es? Dieser Artikel wird Ihnen DOM-Formularoperationen in JavaScript vorstellen. Der Inhalt ist sehr detailliert, werfen wir einen Blick darauf.
1. Holen Sie sich das Formular
Holen Sie sich das Formularelement
Verwenden Sie das Formularattribut in das Document-Objekt Holen Sie sich die Sammlung aller Formulare in der aktuellen HTML-Seite
Rufen Sie das Formularelementelement mithilfe des Namensattributwerts des Formulars im Document-Objekt ab
<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>
Rufen Sie das Formularkomponentenelement ab
Verwenden Sie das HTMLFormElement-Objekt Das Elements-Attribut, um die Sammlung von Formularkomponenten abzurufen
<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. Formularoperation
Auswahl des Textinhalts
Verwenden Sie die Methode select() im HTMLElement-Objekt und im HTMLTextAreaElement-Objekt, um den Inhalt aller Textfelder im Textfeld abzurufen
<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>Textinhalt festlegen
Neu in HTML5 Verwenden Sie die setSelectionRange()-Methode, um den Textinhalt eines fokussierten Textfelds abzurufen
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>Bedienen Sie die Zwischenablage
Verwenden Sie „Kopieren; Ausschneiden, Einfügen“, um die Zwischenablage für Vorgänge festzulegen. Die Dropdown-Listenvorgänge „Kopieren, Ausschneiden und Einfügen“
werden mit erstellt Objekte auswählen und auswählen und einige Eigenschaften und Methoden bereitstellen
3. FormularvalidierungVerwenden Sie checkValidity(), wenn kein Überprüfungsproblem vorliegt Der Wert des Elements ist wahr, andernfalls wird false zurückgegeben.Verwenden Sie die Nachricht setCustomValidity(). Passen Sie eine Fehlermeldung für das Element an. Wenn festgelegt, ist das Element nicht ungültig und zeigt <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>
Ereignis einreichenVerwenden Sie „Senden“, um das Formular einzureichen
<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>Submit()-Methode
Verwenden Sie „Senden“, um das Formular abzusenden, und verwenden Sie eine beliebige normale Schaltfläche, um die Übermittlung abzuschließen
<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>Verwandte Empfehlungen:
JavaScript- und jQuery-DOM-OperationenJavaScript DOM Das Wesen und die Operationsmethode
Das obige ist der detaillierte Inhalt vonDOM-Formularoperationen in Javascript (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
