Question

如何使用Javascript获取特定输入字段的值？

让我们以这家Shopify商店为例：https://geekymate.com/products/magic-doormat-1?variant=18941211607138

我正在尝试创建一个脚本，该脚本根据数量字段中填充的数量自动应用折扣代码。

但是要做到这一点，我需要能够获得该领域的最新价值。代码将如何获取最新/当前值？

编辑：谢谢您提出问题的提示。我确实知道我需要使用getElementById（对于上面的链接页面，它是这样的：var x = document.getElementById（“ Quanity”）。value;），但是如果最终用户正在更改，我如何始终自动获取最新输入价值？

Answer 1

unset http_proxy https_proxy HTTP_PROXY HTTPS_PROXY函数;）

它每次在用户键入新文本时运行。另外，您可以使用keyup()或input()函数。

在jQuery中，它的工作方式如下：

change()

Answer 2

其他答案也是正确的（使用jQuery .keyup），但是您也可以在下面使用此解决方案（更好）。此解决方案使用纯JavaScript。

代码使用.getElementById()选择元素，并在输入更改时使用.addEventListener()进行操作。

var text = document.getElementById("text");
window.onload = function() {
  text.addEventListener("input", function() {
    console.log(text.value);
  });
}

<input id="text" />

或者，如果您需要jQuery解决方案，则可以使用以下内容。这使用jQuery .bind()。

$("#text").bind("input", function() {
  console.log($("#text").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="text" />

Answer 3

查看代码段。使用JavaScript来获取值。并且可以使用addEventListener来检测更改，并可以使用detectChange函数来获取最新值。

var discount = [];

function detectChange() {
  var table = document.getElementsByClassName("shappify_qb_grid")[0];

  for (var i = 0; i < table.rows.length; i++) {
    var row = "";
    for (var j = 0; j < table.rows[i].cells.length; j++) {
      if (j == 1) {
        row = table.rows[i].cells[j].innerHTML;
        rate = parseFloat(row);
        if (rate && discount.indexOf(rate) < 0) {
          discount.push(parseFloat(row));
          console.log('---', parseFloat(row));
        }
      }
      // console.log('discount : ', discount);
    }
  }
}

detectChange();
console.log('discount : ', discount);

<table class="shappify_qb_grid" border=1>
<thead>
	<tr>
		<th>Qty</th>
		<th>Discount</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Buy 1</td>
		<td>0% Off</td>
	</tr>
	<tr>
		<td>Buy 2</td>
		<td>10% Off</td>
	</tr>
	<tr>
		<td>Buy 4</td>
		<td>12% Off</td>
	</tr>
	<tr>
		<td>Buy 5</td>
		<td>14% Off</td>
	</tr>
	<tr>
		<td>Buy 6</td>
		<td>17% Off</td>
	</tr>
</tbody>
</table>

Answer 4

这是在按键上运行的Jquery函数。我在下面添加了一个代码段，以了解它如何与输入字段配合使用。

$('#code').keyup(function() {
    var discountcode = this.value;
    console.log(discountcode);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="code" type="test" />

每次运行特定元素时，都会运行Keyup。想象有人进入“你好”

您将看到以下记录：

'H''He''Hel''Hell''Hello'

Answer 5

这对我有用！

document.getElementById("text").value;

<input id="text" />

Answer 6

使用document.getElementById();-命令获取HTML页面中所引用元素的存在。然后使用原始HTML编码规则中分配属性的相同技术。

使用document.getElementById('able').value = 'whatever';。

如何使用Javascript从输入字段中获取价值？

6 个答案: