-2

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

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

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

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

4

2 回答 2

2

仅使用 DOM 和 JavaScript，您可以使用文本字段上的input事件在其值因用户操作而更改时立即接收回调：

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

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

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（或编译为 JavaScript 的 TypeScript、Dart 或 CoffeeScript 之类的东西）编写的代码，它们使用DOM 的封面。

于 2017-01-08T17:56:05.263 回答
0

我会给你一个实时“英寸到厘米”转换的例子。

请注意，要使此示例正常工作，您需要包含 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/

干杯，西奥

于 2017-01-08T18:04:29.200 回答