Обновление ответа Javascript Calculator в режиме реального времени - PullRequest
Новая
       3

Обновление ответа Javascript Calculator в режиме реального времени

0 голосов
/ 17 ноября 2011

Есть ли способ заставить калькулятор javascript вычислять ответ, когда пользователь вводит текст, вместо того, чтобы нажимать кнопку "вычислить", как в этом примере? 

<form  name="form" id="form">
<input type="Text" name="weight" size="4"> Weight (in Kilos)  
<input type="Text" name="height" size="4"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI     
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
</form>

Использование onblur - это улучшение, но вам все равно придется щелкнуть текстовое поле, чтобы размыть ввод, чтобы получить ответ. Как я уже сказал, я бы предпочел, чтобы ответ обновлялся в режиме реального времени. Какие-либо предложения? Спасибо!

Ответы [ 5 ]

1 голос
/ 17 ноября 2011

HTML 

<form  name="form" id="form">
    <input class="bmi_input" type="Text" name="weight" size="4"/> Weight (in Kilos)  
    <input class="bmi_input" type="Text" name="height" size="4"/> Height (in Centimeters)
    <input class="bmi_input" type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"/> BMI
</form>

Javascript 

function calculateBMI() {
    console.log("I'm here");
}

var els = document.getElementsByClassName("bmi_input");
var sz = els.length;

for(var n = 0; n < sz; ++n) {
    els[n].onkeyup = calculateBMI;
}

http://jsfiddle.net/dbrecht/94hxS/

1 голос
/ 17 ноября 2011

Если пользователь печатает, вы можете использовать событие keyup.Таким образом, в основном, каждый раз, когда пользователь вводит ключ, ваш обработчик событий запускается и может обновлять представление / отображение.

1 голос
/ 17 ноября 2011

Использование onkeyup.

Например, 

<form  name="form" id="form">
<input type="Text" name="weight" size="4" onkeyup="calculateBMI()"> Weight (in Kilos)  
<input type="Text" name="height" size="4" onkeyup="calculateBMI()"> Height (in Centimeters)<br>
<input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI     
<input type="button" style="font-size: 8pt" value="Calculate" onClick="calculateBMI()" name="button">
</form>

Пример jsFiddle .

РЕДАКТИРОВАТЬ: Изменено на onkeyup после нахождения onkeypress у меня не работает в Chrome.

0 голосов
/ 21 ноября 2013

Вот простой пример двух пользовательских текстовых вводов, которые «мгновенно» вычисляют ответ на основе вызываемой функции JavaScript (функции также включены). Кроме того, этот код предоставляет возможность также использовать кнопку (в настоящее время она закомментирована). Надеюсь, это поможет!

HTML: 

<body>
  <div id="form-main">
    <div id="form-div">
      <form class="form" id="form1" method="post">

  <p class="celcius"><h2 style="color:#FFF">Input:</h2>
    <input name="celsius" type="text" class="feedback-input" placeholder="Temperature (Celsius)" onkeyup="Conversion()" id="celsius" />
  </p>

  <hr>
  <h2 style="color:#FFF">Result:</h2>

  <p class="fahrenheit">
    <input name="fahrenheit" type="text" class="feedback-input" id="fahrenheit" onkeyup="Conversion2()" placeholder="Temperature (Fahrenheit)" />
  </p>      

  <!--
  <div class="submit">
    <input type="button" value="CONVERT" id="button-blue" onClick="Conversion()"/>
    <div class="ease"></div>
  </div>
  -->
</form>
</div>
</body>

JavaScript: 

function Conversion() {
    var tempCels = parseFloat(document.getElementById('celsius').value);
    tempFarh =(tempCels)*(1.8)+(32);
    document.getElementById('fahrenheit').value= tempFarh;
 }

function Conversion2() {
    var tempFarh = parseFloat(document.getElementById('fahrenheit').value);
    tempCels =(tempFarh - 32)/(1.8);
    document.getElementById('celsius').value= tempCels;
 }
0 голосов
/ 17 ноября 2011

Вы можете обрабатывать событие onChange в каждом из текстовых полей ввода, вызывая функцию вычисления: 

<form  name="form" id="form">
  <input type="Text" name="weight" size="4" onChange="calculateBMI()"> Weight (in Kilos)  
  <input type="Text" name="height" size="4" onChange="calculateBMI()"> Height (in Centimeters)<br>
  <input type="Text" name="BodyMassIndex" id="BodyMassIndex" size="4"> BMI     
</form>
...