Maison > Article > interface Web > Opérations de formulaire DOM en javascript (avec code)
Opérations de formulaire DOM en javascript (avec code)
- 不言original
- 2018-09-04 10:00:261587parcourir
Quels types d'opérations peuvent être effectués sur le formulaire dans le DOM, et quelles sont les méthodes opératoires ? Cet article partagera avec vous les opérations des formulaires DOM en JavaScript. Le contenu est très détaillé, jetons un œil.
1. Obtenez le formulaire
Obtenez l'élément de formulaire
Utilisez l'attribut Forms dans l'objet Document Obtenez la collection de tous les formulaires de la page HTML actuelle
Utilisez la valeur de l'attribut name du formulaire dans l'objet Document pour obtenir l'élément d'élément de table
<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>
Obtenez le formulaire element element
to L'attribut elements de l'objet HTMLFormElement est utilisé pour obtenir la collection de composants de formulaire
<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.
Sélection du contenu du texte
Utilisez la méthode select() dans l'objet HTMLElement et l'objet HTMLTextAreaElement pour obtenir le contenu de toutes les zones de texte dans la zone de texte<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>
Définir le contenu du texte
La méthode setSelectionRange() est nouvellement ajoutée en HTML5 pour obtenir le contenu textuel d'une zone de texte cibléebody>
<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>
Utiliser le presse-papiers
pour copier ; couper, coller pour définir les opérations de copier, couper et coller du presse-papiers<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>
Le le fonctionnement de la liste déroulante
est créé avec des objets select et option<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>
Validation du formulaire
avec checkValidity() s'il n'y a pas de problème de validation avec la valeur de l'élément, ce sera vrai, sinon, retournez false et setCustomValidity(message) personnalisera un message d'erreur pour l'élément . S'il est défini, l'élément n'est pas invalide et affiche
<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 .Soumission du formulaire
soumettre l'événement.
Utilisez submit pour soumettre le formulaire<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>
Méthode submit()
Utilisez submit pour soumettre le formulaire et utilisez n'importe quel bouton ordinaire pour compléter la soumission<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>Recommandations associées :
Fonctionnement JavaScript et jQuery DOM
L'essence et la méthode de fonctionnement de DOM JavaScript
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!