在 Web 应用程序中进行 "real-time" 单位转换的任何方法

Question

我想建立一个允许用户将 Hz 转换为 bpm 的网站（但请注意，我的问题涉及各种单位转换）。我正在使用 PHP 并在 Apache 上托管我的网站。

所以，我想知道是否可以 "bind" 将输入字段 HTML 元素，就像我们在 WPF 开发中所做的那样，您可以将输入区域绑定到 WPF 元素，并应用某种数据转换，因此如果用户键入 12 bpm，绑定元素将自动并立即显示 0.2 Hz。如果用户随后添加一个“0”，那么 120 bpm 将自动立即转换为 2 Hz.

我试图描述的效果也可以在这个论坛上看到：当我输入问题时，我可以看到 "real-time" 我的文本的最终版本。

这是如何实现的？ PHP 有什么办法吗？我知道 AJAX 但我真的更愿意避免使用 Javascript 来保存我的数学函数。如果我错了请纠正我，但我认为这可以用 Node.js 来完成？我应该考虑迁移到 Node 吗？

Answer 1

仅使用 DOM 和 JavaScript，您可以在文本字段上使用 input event，以便在其值因用户操作而改变时立即收到回调：

document.querySelector("selector-for-the-field").addEventListener("input", function() {
    // Code here to do and display conversion
}, false);

示例（centigrade/Celsuis 到华氏度）：

var f = document.getElementById("f");
document.querySelector("#c").addEventListener("input", function() {
  var value = +this.value;
  if (!isNaN(value)) {
    value = (value * 9) / 5 + 32;
    f.innerHTML = value;
  }
}, false);

<div>
  <label>
  Enter centigrade:
  <input type="text" id="c">
</label>
</div>
<div>
  Fahrenheit: <span id="f"></span>
</div>

退一步说，是的，有几十个库和框架在浏览器中提供MVC/MVVM/MVM/whatever-the-acronym-is-this-week。当前流行的一个简短列表：React，Angular，Vue，Knockout，...请注意，这些不是魔术，它们只是用 JavaScript（或类似 TypeScript 或 Dart 或使用 DOM 封面编译为 JavaScript) 的 CoffeeScript。

Answer 2

我会给你一个实时"inches to cm"转换的例子。

请注意，要使此示例正常工作，您需要包含 jQuery。

HTML:

<div>
    <label>Inches</label>
    <input type="text" id="user_input" />
</div>
<div>
    <label>Centimeters</label>
    <input type="text" id="result" readonly />
</div>

JAVASCRIPT:

$(document).ready(function(){
    $('#user_input').on('propertychange input keyup', function(){
        var thisVal = $(this).val();
        $('#result').val(thisVal * 2.54);
    });
});

Fiddle: https://jsfiddle.net/captain_theo/t10z01cm/

您可以针对任何类型的转化扩展它。

检查我更新的 fiddle，其中还包括 Hz 到 bpm：

https://jsfiddle.net/captain_theo/t10z01cm/1/

干杯，西奥

在 Web 应用程序中进行 "real-time" 单位转换的任何方法

Any way to do "real-time" unit conversion in web application

javascript

php

real-time

unit-conversion