一、使用JavaScript获取input的value
JavaScript是前端开发中常用的语言，可以在网页中通过JS来获取DOM元素的值，也包括input的value。
let inputValue = document.getElementById("inputId").value;
console.log(inputValue);
以上代码中，我们通过getElementById方法获取页面中id为“inputId”的input元素，接着获取该元素的value值，并将value值赋给变量inputValue。最后，我们使用console.log方法打印出inputValue的值。
但是，需要注意的是，如果我们想获取input的value，那么必须先确保DOM元素已经加载完成，否则会出现错误。我们可以通过window.onload来确保页面DOM加载完成后再获取input的value值。
window.onload = function() {
let inputValue = document.getElementById("inputId").value;
console.log(inputValue);
}
二、使用jQuery获取input的value
jQuery是一个广泛应用于前端开发的JavaScript库，其包含了很多简化JavaScript代码的工具函数，可以很方便地获取input的value值。
let inputValue = $("#inputId").val();
console.log(inputValue);
以上代码中，我们使用jQuery的val方法来获取input元素的value值，同样将获取到的值赋给变量inputValue，并使用console.log方法打印出来。
需要注意的是，使用jQuery前需要先对jQuery库进行引入。
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
三、使用Vue.js获取input的value
Vue.js是一种渐进式JavaScript框架，用于构建可复用的Web组件。在Vue.js中获取input的value很方便，只需通过v-model指令即可。
<div id="app">
<input type="text" v-model="inputValue">
<p>{{ inputValue }}</p>
</div>
<script>
new Vue({
el: "#app",
data: {
inputValue: ""
}
})
</script>
以上代码中，我们在Vue实例中定义了一个data属性inputValue，并在input元素中使用v-model指令绑定了该属性。当输入框中的内容发生变化时，inputValue的值也会随之变化，最后将该值显示在p标签中。
四、处理input的value
获取input的value之后，我们可以对其进行下一步处理。比如，用户输入的值可能需要进行数据格式化、校验、加密等等处理。
1、数据格式化
对于输入内容需要格式化的场景，可以通过JavaScript的一些内置方法来处理，例如toLocaleString()方法用于格式化数字、substring()方法用于截取字符串等。
let num = 1234567890;
let formattedNum = num.toLocaleString("en-US");
console.log(formattedNum);
let str = "Hello World";
let formattedStr = str.substring(0, 5);
console.log(formattedStr);
以上代码中，我们使用了toLocaleString()和substring()等方法对输入的数字和字符串进行了格式化，最终将格式化后的结果打印出来。
2、数据校验
在输入表单中，用户输入的内容可能需要进行一些数据校验，例如判断输入的是否为数字、是否符合邮箱格式等。对于这种情况，我们可以使用正则表达式来判断。
let inputStr = "myemail@gmail.com";
let emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (emailReg.test(inputStr)) {
console.log("是合法邮箱地址");
} else {
console.log("不是合法邮箱地址");
}
以上代码中，我们通过正则表达式判断输入的内容是否符合邮箱格式，输出结果为“是合法邮箱地址”或“不是合法邮箱地址”。
3、数据加密
在某些场景下，输入表单中的数据需要进行加密处理，以防止敏感信息泄露。常用的加密方式有MD5、SHA等。
let inputStr = "123456";
let hashedStr = hex_md5(inputStr);
console.log(hashedStr);
以上代码中，我们使用了js-md5库对输入的字符串进行了MD5加密处理，最终将加密结果打印出来。
五、总结
获取input的value是前端开发中的常见需求，我们可以通过JavaScript、jQuery、Vue等多种方式来获取，并且可以对其进行判断、处理等操作，以满足不同场景下的需求。
