Question

我正在尝试将HTML text属性的值分配给hidden属性的值。

text代码：

<input type="text" name="number" id="number" maxlength="4" onBlur="myno=this.value; concatno=myno.concat('0001')" />

我已经使用alert来尝试concatno值的输出。例如，如果用户输入1010，则输出将为10100001。

然后输入我的hidden代码：

<input type="hidden" id="hide" name="hide" value=concatno>

我希望我的hidden的值为1010001，但是该值变成了“ concatno”。我应该如何在hidden属性中分配值？

Answer 1

这里的问题是您从未更新过#hide元素。
您需要使用一些javascript，例如：

document.getElementById('hide').value = concatno;

工作片段：

<input type="text" name="number" id="number" maxlength="4" onkeyup="var myno = this.value; var concatno = myno.concat('0001'); document.getElementById('hide').value=concatno;" />
<input id="hide" name="hide" value=concatno disabled>

请注意，即使这里不是问题所在，我还是建议您使用另一个触发器，例如onkeyup，以便更频繁地更新值。

我还将您的hidden元素更改为disabled以使其可见。

此外，您应该学会避免使用内联JavaScript。
这是我的处理方法：

document.getElementById('number').addEventListener("keyup", function() {
  document.getElementById('hide').value = this.value.concat('0001');
});

<input type="text" name="number" id="number" maxlength="4" />
<input id="hide" name="hide" value=concatno disabled>

文档：getElementById

希望有帮助。

Answer 2

问题在于，您实际上从未更新过#hide元素的值。您需要在事件绑定内设置其值（只是使输入可见以供参考）：

<input type="text" name="number" id="number" maxlength="4" onblur="var myno = this.value; var concatno=myno.concat('0001'); document.getElementById('hide').value = concatno; console.log(concatno)" />

<input type="text" id="hide" name="hide" value=concatno disabled />

但是，值得注意的是，通常应避免使用干扰性事件处理程序。而是将事件处理委托给外部Javascript。这样，您的设计师就无需了解JS，甚至不必担心JS。

以下是使用不干扰处理程序的示例：

document.getElementById('number').addEventListener('blur', function() {
  document.getElementById('hide').value = this.value.concat('0001');
});

<input type="text" name="number" id="number" maxlength="4" />
<input type="text" id="hide" name="hide" placeholder="concatno" disabled />

Answer 3

尝试改用name / id；

<input type="text" name="number" id="number" maxlength="4" oninput='hide.value=(this.value + "0001")'  autofocus=''/>
<input type="hidden" id="hide" name="hide" />

没有内联脚本：

document.addEventListener('DOMContentLoaded', function() {
  let hide = document.querySelector('#hide');
  document.querySelector('#number').addEventListener('input', function() {
    hide.value = this.value + '0001';
  });
});

<input type="text" name="number" id="number" maxlength="4" autofocus='' />
<input type="hidden" id="hide" name="hide" />

HTML-如何将文本值分配给另一个属性的值？

3 个答案: