Question

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

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

我试图描述的效果也可以在这个论坛上注明：当我输入我的问题时，我可以看到我的文本的“实时”最终版本。

这是如何实现的？有没有办法用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);

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

＆＃13;

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);

＆＃13;

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

＆＃13;

退一步，是的，有很多库和框架在浏览器中提供MVC / MVVM / MVM /无论是什么缩写。当前流行的简短列表：React，Angular，Vue，Knockout，...请注意，这些不是魔术，它们只是用JavaScript编写的代码（或类似于编写JavaScript的TypeScript或Dart或CoffeeScript）使用DOM的封面。

Answer 2

我将举例说明实时＆＃34;英寸到厘米＆＃34;转换。

请注意，要使用此示例，您需要包含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);
    });
});

小提琴：https://jsfiddle.net/captain_theo/t10z01cm/

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

检查我的更新小提琴，其中包括Hz到bpm：

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

干杯，Theo

任何在Web应用程序中进行“实时”单位转换的方法

2 个答案: