大佬教程收集整理的这篇文章主要介绍了获取 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_745_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,请注明来意。