如何不使用JavaScript触发元素输入事件？实现类AngularJS ng-model功能

Hey there! Great question—let's tackle both of your requests one by one, since they're related but address different parts of form interaction without JavaScript.

HTML has native behaviors that let you trigger common input events like focus, change, and invalid without writing any JavaScript. Here are the most useful methods:

• Focus/Blur via <label> Tags
  The <label> element is designed to associate with form inputs. When you click a label linked to an input, the browser automatically triggers the input's focus event (and blur if the input was already focused). No JS needed:

  <label for="username">Click me to focus the input:</label>
  <input type="text" id="username">
  

  This works for all input types, including checkboxes and radio buttons—clicking the label will toggle their state and trigger change events too.

• Change/Input Events via Native Form Submission
  When a user modifies an input and submits the form, the browser natively triggers the change event on the input (if its value differs from the initial state). You don't need JS to trigger this event—the browser handles it automatically:

  <form>
    <input type="email" name="userEmail" placeholder="Enter email">
    <button type="submit">Submit</button>
  </form>
  

  Even if you don't handle the submission with JS, the change event still fires as part of the browser's default form behavior.

• Validation Events via HTML5 Attributes
  Using HTML5 validation attributes like required, pattern, or min triggers the invalid event when the user submits invalid input. The browser handles validation and event firing natively:

  <input type="password" required pattern=".{8,}" title="Password must be at least 8 characters">
  <button type="submit">Sign Up</button>
  

  If the input fails validation, the browser shows a default error message and fires the invalid event—no JS required to trigger this.

AngularJS's ng-model provides two-way data binding (updating the model when the view changes, and vice versa). Pure HTML/CSS can't replicate full two-way binding, but you can achieve one-way input-to-view sync (user input updates a display element) using native features:

• Real-Time Sync with <output> Element
  The <output> tag is built to display dynamic values from form elements. It automatically syncs with linked inputs, updating in real time as the user types—no JS needed:

  <form id="greetingForm">
    <label for="userName">Your Name:</label>
    <input type="text" id="userName" name="userName">
    <p>Hello, <output for="userName" form="greetingForm">friend</output>!</p>
  </form>
  

  As you type in the input, the <output> updates instantly. This is the closest you'll get to ng-model's view-to-view sync without JavaScript.

• CSS Limitation: Static Value Display
  You might see examples using CSS attr() to show input values, but note that CSS only reads the initial value attribute—it won't update as the user types. This is a static display, not real-time sync:

  <div class="input-display">
    <input type="text" id="staticInput" value="Initial Text">
    <span class="value-show"></span>
  </div>
  

  .value-show::after {
    content: "Current value: " attr(data-value);
  }
  /* Warning: This won't update when the user types—only shows the initial value */
  

  Stick with <output> for real-time updates.

• Partial "Two-Way" Sync (Limitations)
  Pure HTML can't handle true two-way binding (e.g., editing a display element to update the input), since there's no native way to sync non-form element content back to an input. For that, you'd need JavaScript—but for most basic use cases, the <output> method covers the core user input sync behavior of ng-model.

内容的提问来源于stack exchange，提问作者Andrés Omsun