javascript - 如何自动输入

Question

<form role="form" method="post" action="tes.php">
<button type="button" id="setValueButton">xSmall</button>
<input data-max="5000" name="name[1]" type="text">
<button type="button" id="setValueButton">xSmall</button>
<input data-max="4000" name="name[2]" type="text">
<button type="button" id="setValueButton">xSmall</button>
<input data-max="1000" name="name[3]" type="text">
</form>

1. 如果点击 xSmall 按钮，如何自动在输入中输入值
2. 如果用户输入的值大于 data-max，则将该值设置为 data-max。

Answer 1

首先，每个元素必须有一个唯一的 ID:

<form role="form" method="post" action="tes.php">
    <button type="button" id="setValueButton1">xSmall</button>
    <input data-max="5000" name="name[1]" type="text">
    <button type="button" id="setValueButton2">xSmall</button>
    <input data-max="4000" name="name[2]" type="text">
    <button type="button" id="setValueButton3">xSmall</button>
    <input data-max="1000" name="name[3]" type="text">
</form>

然后你需要使用 javascript(jQuery 中的示例)

$('#setValueButton1').on('click', function () {
    $('input[name="name[1]"]').val('text string');
});

当您单击第一个按钮时，此示例将在第一个框中输入文本字符串。

要检测输入的更改，请使用如下内容:

$('#setValueButton1').on('change', function () {
    if ('#setValueButton1').val() > '5000' {
        // set it as above
    }
}

https://jsfiddle.net/hmhf9mxf/