Question

<div class="box2">Enter taxable income :-
    <br>
    <input type="text" id="entry" onchange="calc()" required></input>
    <input type="submit" name="submit" value="Submit" onclick="calc()"></input>
    <p>Income :-
        <br>
        <input type="text" id="res"></input>
    </p>
    <p>Your tax bracket :-
        <br>
        <input type="text" id="tbra"></input>
    </p>
    <p>Tax :-
        <br>
        <input type="text" id="tax"></input>
    </p>
    <p>Education Cess :-
        <br>
        <input type="text" id="ec"></input>
    </p>
    <p>Higher Education Cess :-
        <br>
        <input type="text" id="hec"></input>
    </p>
    <p>Total Tax :-
        <br>
        <input type="text" id="ttax"></input>
    </p>
</div>

在上面的表格中，当我输入新值时，如何更改文本框中的值。目前要么我必须按回车键（onchange）或按提交按钮。我正在使用JavaScript函数。

Answer 1

您可以使用onkeypress事件，该事件会在用户键入时激活，而不是在表单实际更改时（失去焦点）激活：

<input type="text" id="entry" onkeypress="calc()" />

Answer 2

<强> jsBin demo

你有没有想过＆＃34;如果用户paste是一个值＆＃34; 怎么办？

同样<input />是无效的HTML标记，
输入为void elements，因此不应该有结束标记。

HTML：

    <div class="box2">
        Enter taxable income:<br>
        <input type="text" id="entry" required>
        <p>
            Income:<br>
            <input type="text" id="res">
        </p>
        <p>Your tax bracket:<br>
            <input type="text" id="tbra">
        </p>
        <p>
            Tax:<br>
            <input type="text" id="tax">
        </p>
        <p>
            Education Cess:<br>
            <input type="text" id="ec">
        </p>
        <p>
            Higher Education Cess:<br>
            <input type="text" id="hec">
        </p>
        <p>
            Total Tax:<br>
            <input type="text" id="ttax">
        </p>
    </div>

正如您所看到的，我已经删除了被认为是不良行为的内联JS 将所有逻辑移到JS中：

function id(v){return document.getElementById(v);}

var entry = id("entry");
var res   = id("res");

function calc() {
    res.value = parseInt(entry.value, 10) + 100;
}

entry.addEventListener("input", calc, false);

如何在用户输入javascript时更改值

2 个答案: