刷新文本框输出答案

【问题标题】：Refreshing textbox output刷新文本框输出
【发布时间】：2013-10-23 21:01:22
【问题描述】：

我有一个简单的十进制到二进制转换器。

它工作起来很简单，你在文本框中写下你的十进制数字，然后点击按钮得到你的结果，但我希望它是自动的，所以你不必每次都点击提交按钮，然后刷新自动的。我的代码是：

<div id="Conv" style="font:24px bold; display: none">
Decimaal naar binair.<br>
    <input type="text" id="txtDec" maxlength="3"/>
    <input type="button" value="Convert" onclick="document.getElementById('Converter2').innerHTML=ConvertToBinary(document.getElementById('txtDec').value);" />
    <span id="Converter2"></span>
</div>

这里是javascript部分：

function ConvertToBinary(dec) {
    var bits = [];
    var dividend = dec;
    var remainder = 0;
    while (dividend >= 2) {
        remainder = dividend % 2;
        bits.push(remainder);
        dividend = (dividend - remainder) / 2;
    }
    bits.push(dividend);
    bits.reverse();

    return String('000000000' + bits.join("")).slice(-8);


}

【问题讨论】：

你想在txtDec的onchange/onkeyup事件中移动按钮的事件
那么，你在这里有五个不错的答案，任何提供的答案都不值得accept？

标签： javascript jquery html textbox refresh

【解决方案1】：

在文本框的 .keyup() 事件中处理转换

$('#txtDec').keyup(function(e) {
    var converted = ConvertToBinary(this.value);
    $('span#Converter2').text(converted);
});

【讨论】：

【解决方案2】：

你可以运行代码onkeyup

<input type="text" id="txtDec" maxlength="3" onkeyup="convert(this)" />

function convert(el) {
    document.getElementById('Converter2').innerHTML=ConvertToBinary(el.value);
}

【讨论】：

【解决方案3】：

使用 .keyup() 并在用户完成输入后更改值（也就是按回车键）

$('#txtDec').keyup(function(event) {
     if (event.keyCode == 13){
        var converted = ConvertToBinary(this.value);
        $('span#Converter2').text(converted);
     }
 });

【讨论】：

【解决方案4】：

我认为如果这项任务仅用于学习 javascript，建议的选项就足够了。否则，让我添加一些一般性注释。如果您使用标准表单元素，例如输入和文本区域，您可以在鼠标的帮助下插入文本（我的意思是右键单击 -> 粘贴）。这样，仅处理 keyup 是不够的。通过监听 mouseup 来处理每一次鼠标点击也不是一个好主意。以编程方式更改字段怎么样？

我认为最好的方法是处理 onchange 事件，每次您更改内部值并且元素将“无焦点”时触发。

【讨论】：

【解决方案5】：

在现代浏览器中，您可以使用oninput 事件，每次更改input 的内容时都会触发该事件。在较旧的浏览器（实际上是 IEonchange 事件，但在这种情况下，您需要在事件触发之前模糊 input。（仅在 IE 中，有可用的 onpropertychange 事件，它还可以处理以编程方式对元素进行的更改。）

在下面的代码n-p 中，我重写了您的ConvertToBinary() 函数，只是为了展示另一种转换数字基数的方法。 Number.toString() 可用于将十进制数转换为 2 到 36 之间的任何基数，parseInt() 可用于将表示基于 2 和 36 之间的数字的字符串转换为十进制数。

document.getElementById('txtDec').addEventListener('input', function () {
    var bin = parseInt(this.value, 10).toString(2),
        digits = ''; 
    if (!isNaN(bin) && bin.length < 9) {
        digits = new Array(9 - bin.length).join('0') + bin;
    }
    document.getElementById('Converter2').innerHTML = digits;
});

A live demo at jsFiddle.

当然你可以在传递给addEventListener()的匿名函数中使用你原来的ConvertToBinary()，或者你可以只传递它的名字：

document.getElementById('txtDec').addEventListener('input', ConvertToBinary);

【讨论】：