Question

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

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

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


}

Answer 1

您可以运行代码 onkeyup

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

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

Answer 2

处理文本框.keyup()事件

中的转换

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

Answer 3

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

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

Answer 4

我认为提议的选项足够好，以防此任务仅用于研究javascript。否则，让我添加一些一般性说明。如果您正在使用标准表单元素（如input和textarea），则可以在鼠标的帮助下插入文本（我的意思是右键单击 - >粘贴）。这样，仅处理密钥是不够的。通过听鼠标来处理每一次鼠标点击也不是一个好主意。如何以程序化的方式改变现场？

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

Answer 5

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

在下面的代码段中，我重写了您的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);

刷新文本框输出

5 个答案: