表单操作
获取表单
获取表单元素
获取表单元素的方式，大体上可以分为以下几种方式：
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对象提供了forms属性
该属性用于获取当前HTML页面中所有的表单的集合，返回HTMLCollection对象，该对象封装了当前HTML页面中的所有表单对象。
示例代码如下：
<!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对象的elements属性
该属性用于获取指定表单的所有组件的集合。
<!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对象都提供了select（）方法，该方法用于选择当前文本框的所有文本内容。
<!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>原文地址：https://www.cnblogs.com/homehtml/p/11846213.html
时间： 2024-11-08 23:23:34