JavaScript 中单个数字的双（链接）文本字段数字格式条目？-解网

问：

我过去曾尝试实现类似的功能，但不知何故，它总是导致递归调用和头痛。

功能是：

我想要两个输入文本字段，它们将更改内存中的单个数字，但格式不同 - 并且都会在任一文本字段的值更改时自动更新（从这个意义上说，文本字段将是“链接”或“同步”的）。

在下面的示例中，我想以整数百分比在内部管理“主要”数字变量;其中一个文本字段应允许直接显示和更改整数百分比;另一个文本字段应显示（并允许更改）同一变量，但表示为 0.0 和 1.0 之间的“相对”浮点数mynum_percmynum_perc

（原则上，你可以对双文本输入应用相同的思维，一个以摄氏度显示浮点数，另一个以华氏度显示同步浮点数 - 但在内部你只管理一个浮点变量，比如摄氏度变量）。

所以现在我又需要这个了，我想我会先发制人地准备一个例子，以便在我遇到麻烦时问——但对我来说令人惊讶的是，下面的例子有效：

var in_perc_tf = document.getElementById('perc');
var in_rel_tf = document.getElementById('rel');

var mynum_perc = 20;

function perc_change(event) {
  console.log("perc_change");
  var elem = event.target;
  // assign new value
  mynum_perc = parseInt(elem.value);
  // recalc and assign to rel
  in_rel_tf.value = mynum_perc/100.0;
}

function rel_change(event) {
  console.log("rel_change");
  var elem = event.target;
  // get new value
  let newrelval = parseFloat(elem.value);
  // recalc and assign to perc
  mynum_perc = Math.round(newrelval*100);
  in_perc_tf.value = mynum_perc;
}

in_perc_tf.addEventListener('change', perc_change);
in_rel_tf.addEventListener('change', rel_change);

in_perc_tf.value = mynum_perc;

<input type="text" id="perc"></input>
<input type="text" id="rel"></input>

从某种意义上说，当您在一个字段中输入一个数字并按或时，另一个字段中的数字会按预期更新。ENTERTAB

问题是，如果我以编程方式分配值，例如，那么只有一个字段更新，而不是两个字段。（现在我想起来了，过去我可能曾经得到递归调用，正是因为我试图覆盖默认行为，以便在它们中的任何一个发生编程更改时实现两个文本字段的更新）。in_perc_tf.value = mynum_perc;

所以，我想，我的主要问题是 - 我怎样才能保持当前的 UI 键盘功能，并在分配它们中的任何一个时让两个文本字段都更新？value

另一方面，我被说服有人会为这样的东西制作一个 JS 库，但令人惊讶的是，我找不到任何接近的东西。既然 SO 反对要求软件推荐，让我试着换一种方式问：“单个数字的双格式链接/同步文本字段条目”是否有不同的术语，所以我可以尝试自己查找现有的 JS 库？

JavaScript HTML 用户界面数字格式

const in_perc_tf = document.getElementById("perc");
const in_rel_tf = document.getElementById("rel");

let mynum_perc = 20;

function update(integer) {
  mynum_perc = integer;
  in_perc_tf.value = integer;
  in_rel_tf.value = integer / 100;
}

function perc_change(event) {
  console.log("perc_change");
  update(parseInt(event.currentTarget.value));
}

function rel_change(event) {
  console.log("rel_change");
  update(Math.round(parseFloat(event.currentTarget.value) * 100));
}

in_perc_tf.addEventListener("change", perc_change);
in_rel_tf.addEventListener("change", rel_change);

update(mynum_perc);
setTimeout(() => update(40), 1000);

<input type="text" id="perc"></input>
<input type="text" id="rel"></input>

JavaScript 中单个数字的双（链接）文本字段数字格式条目？

Dual (linked) text field number format entry for a single number in JavaScript?

评论

评论