Любой способ сделать конвертацию в реальном времени в веб-приложении

Я хочу создать сайт, который позволяет пользователю конвертировать Hz в bpm (обратите внимание, однако, что мой вопрос касается всех видов преобразования единиц). Я использую PHP и размещаю свой сайт на Apache.

Итак, мне было интересно, можно ли "привязать" поле ввода к элементу HTML, как мы это делаем в разработке WPF, где вы можете привязать область ввода к элементу WPF и применить какое-то преобразование данных, чтобы, если пользователь типы 12 bpmсвязанный элемент будет отображаться автоматически и сразу 0.2 Hz, Если пользователь затем добавляет "0", так 120 bpm будет автоматически и сразу преобразован в 2 Hz,

Эффект, который я пытаюсь описать, также можно отметить на этом форуме: когда я набираю свой вопрос, я вижу окончательную версию своего текста в режиме реального времени.

Как это достигается? Есть ли способ сделать это с помощью PHP? Я знаю об AJAX, но я действительно предпочел бы избегать использования Javascript для хранения моих математических функций. Поправьте меня, если я ошибаюсь, но я думаю, что это можно сделать с помощью Node.js? Должен ли я рассмотреть возможность перехода на узел?

Источник

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/ что-нибудь-акроним-это-на-этой неделе в браузере. Краткий список текущих популярных: React, Angular, Vue, Knockout, ... Обратите внимание, что это не волшебство, это просто код, написанный на JavaScript (или что-то вроде TypeScript, или Dart, или CoffeeScript, который компилируется в JavaScript), которые используют DOM чехлы.

Источник

Я приведу пример преобразования "дюймов в см" в реальном времени.

Обратите внимание, чтобы этот пример работал, вам нужно будет включить 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/

Вы можете расширить это для любого типа конверсии.

Проверьте мою обновленную скрипку, которая включает в себя Гц до bpm также:

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

Ура, Тео

Источник
Другие вопросы по тегам