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

Question

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

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

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

但要做到这一点，我需要能够获得该字段的最新值。 获取最新/当前值的代码是什么样的？

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

Answer 1

其他答案也是正确的（使用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 2

keyup() 函数 ;)

它每次在用户输入新文本时运行。 此外，您还可以使用input() 或change() 函数。

在 jQuery 中它是这样工作的：

$(document).on('keyup', '#InputID', function(){
    //...code...
    var discount = Number( document.getElementById('InputID').value )*10/100;
});

Answer 3

这是一个在按键上运行的 Jquery 函数。我在下面添加了一个 sn-p，以查看它如何与输入字段相关联。

$('#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''他''Hel''地狱''你好'

Answer 4

查看代码 sn-p。使用 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 5

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

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

Answer 6

这对我有用！

document.getElementById("text").value;

<input id="text" />