本文目录导读：

1. 原生JavaScript方法
2. jQuery方法
3. 现代前端框架方法

在Web开发中，获取<input>元素中用户输入的文字是一个常见的需求，以下是一些获取<input>里面输入文字的方法与技巧，这些方法涵盖了原生JavaScript、jQuery以及现代前端框架（如React、Vue、Angular）的使用场景。

一、原生JavaScript方法

1、使用value属性：

- 通过getElementById或querySelector等方法获取<input>元素的DOM对象，然后直接访问其value属性来获取输入的文字。

- 示例代码：

     // 使用getElementById
     let input = document.getElementById("myInput");
     let content = input.value;
     console.log(content);
     // 使用querySelector
     let input2 = document.querySelector("#myInput");
     let content2 = input2.value;
     console.log(content2);

2、使用事件监听：

- 可以使用onchange或oninput事件来监听<input>的变化，并在事件处理函数中获取新的输入内容。

- 示例代码：

     // 使用onchange事件
     let input = document.getElementById("myInput");
     input.onchange = function() {
         let content = input.value;
         console.log(content);
     };
     // 使用oninput事件
     input.oninput = function() {
         let content = input.value;
         console.log(content);
     };

3、使用其他DOM方法：

- 还可以通过getElementsByTagName、getElementsByName、getElementsByClassName等方法获取一组DOM元素，然后遍历它们以获取各自的输入内容。

- 示例代码：

     // 使用getElementsByClassName
     let inputs = document.getElementsByClassName("inputClass");
     let inputTexts = [];
     for (let i = 0; i < inputs.length; i++) {
         inputTexts.push(inputs[i].value);
     }
     console.log(inputTexts);

二、jQuery方法

1、使用val()方法：

- jQuery提供了val()方法来快速获取或设置匹配元素的当前值。

- 示例代码：

     // 获取单个元素的值
     var inputText = $('#myInput').val();
     console.log(inputText);
     // 获取多个元素的所有值
     var inputTexts = $('.inputClass').map(function() {
         return $(this).val();
     }).get();
     console.log(inputTexts);

2、使用事件监听：

- 类似于原生JavaScript，jQuery也可以绑定事件监听器来实时获取输入内容的变化。

- 示例代码：

     $('.inputClass').on('input', function() {
         var currentInputValue = $(this).val();
         console.log(currentInputValue);
     });

三、现代前端框架方法

1、React：

- 在React中，通常使用useState钩子来管理输入框的状态，并通过事件处理函数来更新状态。

- 示例代码：

     import React, { useState } from 'react';
     function InputComponent() {
         const [inputValue, setInputValue] = useState('');
         const handleInputChange = (event) => {
             setInputValue(event.target.value);
         };
         return (
             <input type="text" value={inputValue} onChange={handleInputChange} />
         );
     }

2、Vue：

- 在Vue中，可以使用v-model指令来实现双向数据绑定，从而轻松获取输入框的文本。

- 示例代码：

     <template>
         <input v-model="inputValue" />
     </template>
     <script>
     export default {
         data() {
             return {
                 inputValue: ''
             };
         }
     };
     </script>

3、Angular：

- 在Angular中，可以使用[(ngModel)]来实现双向数据绑定。

- 示例代码：

     <input [(ngModel)]="inputValue" />
     <script>
     import { Component } from '@angular/core';
     @Component({
         selector: 'app-input',
         template:<input [(ngModel)]="inputValue"/>
     })
     export class InputComponent {
         inputValue: string = '';
     }
     </script>

原生JavaScript：直接、不依赖外部库，适用于任何环境。

jQuery：简洁语法、强大选择器引擎，适合处理复杂选择器和多个元素。

现代前端框架：声明式编程范式、数据绑定机制，使获取输入框文本更加高效和简洁。

获取<input>里面输入文字的方法多种多样，开发者可以根据具体需求和项目环境选择合适的方法。