javascript输入值手动输入后不更新

Question

如果我在t1中输入内容，则t2会更改。
但是，如果t2已经具有手动输入，则不会再更改（反之亦然）。

如何更改已经使用javascript手动输入的输入字段（无需重新加载页面！）？

<!DOCTYPE html>
<html>
<body>

inputfields are not changed, if they have/had an input already!<br />
<br />
t1: <input type="text" id="t1" value="" onchange="upd1()"><br /><br />
t2: <input type="text" id="t2" value="" onchange="upd2()">

<script>
function upd1() {
  t2.setAttribute("value", "changed");
  return true;
}

function upd2() {
  t1.setAttribute("value", "changed");
  return true;
}
</script>

</body>
</html>

Answer 1

您还可以保存每个字段的旧值以继续编辑。 并且每次都会在另一个字段上显示编辑状态。 它将使用户感到更舒适。

 inputfields are not changed, if they have/had an input already!<br /> <br /> <input type="text" id="t1" value="" onClick="renderFirstEl()" onInput="upd1()"><br /><br /> <input type="text" id="t2" value="" onClick="renderSecondEl()" onInput="upd2()"> <script> let firstElValue = ''; let secondElValue = ''; function upd1() { let el = document.querySelector('#t2'); el.value = 'changed'; return true; } function upd2() { let el = document.querySelector('#t1'); el.value = 'changed'; return true; } function renderFirstEl() { let el = document.querySelector('#t1'); secondElValue = document.querySelector('#t2').value; el.value = firstElValue; } function renderSecondEl() { let el = document.querySelector('#t2'); firstElValue = document.querySelector('#t1').value; el.value = secondElValue; } </script>

Answer 2

简单的答案是使用这个：

 function upd1() { t2.value = 'changed'; return true; } function upd2() { t1.value = 'changed'; return true; }

 t1: <input type="text" id="t1" value="" onchange="upd1()"><br /><br /> t2: <input type="text" id="t2" value="" onchange="upd2()">

键入输入之一并按Enter后，值将更改。

因为如这里所说： https : //www.w3schools.com/jsref/met_element_setattribute.asp

“ setAttribute（）方法将指定的属性添加到元素，并为其提供指定的值。 如果指定的属性已经存在，则仅设置/更改该值 。”

javascript输入值手动输入后不更新

问题描述

2 个解决方案

解决方案1
0 2018-03-17 18:00:06

解决方案2
-1 2018-03-17 17:39:53

javascript输入值手动输入后不更新

问题描述

2 个解决方案

解决方案1 0 2018-03-17 18:00:06

解决方案2 -1 2018-03-17 17:39:53

解决方案1
0 2018-03-17 18:00:06

解决方案2
-1 2018-03-17 17:39:53