刷新文本框输出

Refreshing textbox output

本文关键字：输出 文本 刷新      更新时间：2023-09-26

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

它的工作原理很简单，您在文本框中输入十进制数，然后单击按钮以获取结果，但我希望它是自动的，因此您不必每次都单击提交按钮，并自动刷新。我的代码是： 

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

}
文本框

的.keyup()事件中的句柄转换

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

您可以在keyup上运行代码

<input type="text" id="txtDec" maxlength="3" onkeyup="convert(this)" />
function convert(el) {
    document.getElementById('Converter2').innerHTML=ConvertToBinary(el.value);
}

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

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

如果这个任务仅用于研究javascript，建议的选项就足够了。否则，让我补充一些一般性说明。如果您正在使用标准表单元素，例如输入和文本区域，则可以借助鼠标插入文本（我的意思是右键单击 ->粘贴）。这样，仅处理键控是不够的。通过听鼠标向上来处理每次鼠标点击也不是那么好主意。以编程方式更改字段怎么样？

我相信最好的方法是处理onchange事件，每次你改变内在价值和元素时都会触发该事件，并且元素将"不聚焦"。

在现代浏览器中，您可以使用oninput事件，每次更改input的内容时都会触发该事件。在较旧的浏览器（实际上是 IE<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;
});

jsFiddle的现场演示。

当然，您可以在传递给 addEventListener() 的匿名函数中使用原始ConvertToBinary()，或者只能传递它的名称：

document.getElementById('txtDec').addEventListener('input', ConvertToBinary);
相关文章：