灏天阁

表单事件

· Yin灏

内容变化事件

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <form class="" method="post">
    <h3>个人资料</h3>
    <input type="text" id="username" name="username" placeholder="username" size="16">
    <input type="text" id="password" name="password" placeholder="password" size="16">
    <p></p>
    <select id="select01" name="select01">
      <option value="">choice of day-off</option>
      <option value="0">Sunday</option>
      <option value="1">Monday</option>
      <option value="2">Tuesday</option>
      <option value="3">Wednesday</option>
      <option value="4">Thursday</option>
      <option value="5">Friday</option>
      <option value="6">Saturday</option>
    </select>
    <p></p>
    <button type="submit">Login</button>
    <button type="reset">Reset</button>
  </form>
  <script src="js/index.js" charset="utf-8"></script>
</body>

</html>

获取和失去焦点相关事件

username.onblur = function(event) {
  event.target.style.outline = '1px solid red';
}

username.onfocus = function (event) {
  event.target.style.outline = '3px solid blue';
}

// 可以控制 form 元素的所有子元素的 获得和失去焦点事件
form01.addEventListener('focusin', () => console.log('Focus-in event occurs.'));
form01.addEventListener('focusout', () => console.log('Focus-out event occurs.'));

输入事件

当用户输入特定文本到特定 input 或 textarea 元素实例中，会发生输入 input 事件。

username.oninput = function(event) {
  console.log(event.target.value);
}

无效事件

在 form 中，任何被设置为必填 或是 填入文本必须符合特定模式的 input 元素的实例数据，被提交时，若未被填入任何文本或是不符合规则，就会触发无效 invalid 事件。

username.oninvalid = function(event) {
  console.log(event);
  console.log('Need to type username!');
}

password.oninvalid = function(event) {
  console.log(event);
  console.log('Need to type password!');
}

重置事件

form01.onreset = function() {
  console.log('Data of the form is reset!');
}

搜索事件

<input type="search" id="search" name="search" placeholder="job category.." size="9">

按下 ENTER 键或是点击右边的 x ，都会触发搜索事件。

search.onsearch = function(event) {
  console.log('The query is searshed');
}

选定文本事件

在 input 或 textarea 元素实例中，其内容的任何文本，被选中时，都会触发选中文本事件。

search.onselect = function(event) {
  console.log('The query text is selected');
}

提交事件

form01.onsubmit = function(event) {
  console.log('sumbited');
}

- Book Lists -