大佬教程收集整理的这篇文章主要介绍了获取 HTML 输入的字符串内容，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个 HTML 表单，其中包含预定义的值，如果需要，用户必须通过编辑其内容来确认这些值。 我想进行持续检查，以便每个单元格的颜色背景根据其内容而变化。 例如，如果单元格为空，则其背景应为红色。稍后我会添加更多检查，例如如果它包含字符串“MISSING VALUE”，它应该是黄色等等。
这是我的表单和我尝试执行的代码的示例：
<!DOCTYPE HTML>
<HTML>
<style type="text/CSS">
@R_301_5991@.first {
display: @R_301_5991@;
@R_301_5991@-layout: auto;
float: none margin-left: auto;
margin-right: auto;
}
.@R_301_5991@_element {
display: @R_301_5991@-cell;
}
</style>
<@R_301_5991@ class="first">
<div class="@R_301_5991@_element">
<p style="text-align: center;">First name:<br><input name="import_date_visit" ID="subEmail" type="text" required size="25" onchange="checkFilled();" value="Claudio"></p>
</div>
<div class="@R_301_5991@_element">
<p style="text-align: center;">last name:<br><input name="import_date_visit" type="text" required size="25" onchange="checkFilled();" value="MISSING VALUE"></p>
</div>
</@R_301_5991@>
<script type="text/JavaScript">
function checkFilled() {
var inputVal = document.getElementsByClassname("@R_301_5991@_element");
for (var i = 0; i < inputVal.length; i++) {
document.writeln((i + 1) + ": " + inputVal[i].value);
}
for (var i = 0; i < inputVal.length; i++) {
if (inputVal[i].value == "") {
inputVal[i].style.BACkgroundcolor = "red";
} else {
inputVal[i].style.BACkgroundcolor = "white";
}
}
}
checkFilled();
</script>
</HTML>
我不明白的是如何获取 div 元素中字符串的值。如您所见，我正在尝试将其打印为调试，并且我期望获得值 Claudio 和 @H_755_10@mISSING VALUE，但我得到的只是 undefined。我想获取单元格的内容应该非常简单，所以我认为我错过了一些非常明显的东西。
感谢您的帮助。
首先在 div 元素中找到 input 元素，然后对其使用 value 属性。
function checkFilled() {
const divEle = document.getElementsByClassName("table_element");
for(let i = 0; i < divEle.length; i++) {
const inputVal = divEle[i].children[0].children[1];
if (inputVal.value == "") {
inputVal.style.BACkgroundColor = "red";
} else if (inputVal.value == "MISSING VALUE") {
inputVal.style.BACkgroundColor = "green";
}
}
}
checkFilled();<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table.first{
display: table;
table-layout: auto;
float:none
margin-left: auto;
margin-right: auto;
}
.table_element{
display: table-cell;
}
</style>
</head>
<body>
<table class="first">
<div class="table_element">
<p style="text-align: center;">First Name:<br>
<input name="import_date_visit" id="subEmail" type="text" required size="25" onchange="checkFilled();" value="Claudio" />
</p>
</div>
<div class="table_element">
<p style="text-align: center;">last name:<br><input name="import_date_visit" type="text" required size="25" onchange="checkFilled();" value="MISSING VALUE" /></p>
</div>
</table>
</body>
</html>,
首先，您应该始终拥有一个 body 元素。每当你创建一个新的 HTML 文档时，你应该首先粘贴以下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
脚本和样式表应放入 head 部分，用户应该可以看到的任何内容都应放入 body 部分。 <meta charset="utf-8"> 应始终存在 - 否则将无法正确呈现非 ASCII 字符。将 utf-8 更改为您在编辑器中使用的任何编码。
其次，inputVal[i].value 尝试访问 p 侧的 .table_element 元素的 value 属性 - 但段落没有值，因此您得到 undefined。
第三，不应使用 document.write 和 document.writeln - 如果您想向用户显示某些内容，请将其写入 HTML 元素，如果您想出于调试目的打印某些内容，请使用console.log(...)。
最后，div 不是 table 的有效子代 - 只有 thead、tbody 和 tr 是。
要查找输入元素，您可以使用 document.querySELEctorAll。遵循有效的现代代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table.first {
display: table;
table-layout: auto;
float: none;
margin-left: auto;
margin-right: auto;
}
.table_element {
display: table-cell;
}
</style>
<script type="text/javascript">
function checkFilled() {
let inputElements = document.querySELEctorAll(".table_element input");
let outputElement = document.querySELEctor("#output");
outputElement.innerHTML = "You entered : ";
for (let [index,inputElement] of inputElements.entries()) {
outputElement.innerHTML += " " + (index + 1) + " " + inputElement.value;
if (inputElement.value == "") {
inputElement.style = "BACkground-color: red;";
} else {
inputElement.style = "BACkground-color: green;";
}
}
}
window.addEventListener("load",checkFilled);
</script>
</head>
<body>
<div class="table_element">
<p style="text-align: center;">First Name :</p>
<input name="import_date_visit" id="subEmail" type="text" required size="25" oninput="checkFilled();" value="Claudio">
</div>
<div class="table_element">
<p style="text-align: center;">last name :</p>
<input name="import_date_visit" type="text" required size="25" oninput="checkFilled();" value="MISSING VALUE">
</div>
<p id="output">You entered : nothing yet</p>
</body>
</html>以上是大佬教程为你收集整理的获取 HTML 输入的字符串内容全部内容，希望文章能够帮你解决获取 HTML 输入的字符串内容所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。