为了账号安全,请及时绑定邮箱和手机立即绑定

如何在函数返回的只读字段中显示值

如何在函数返回的只读字段中显示值

一只甜甜圈 2023-10-10 16:45:36
我有 3 个输入字段。当我将鼠标从第三个输入字段移开时,3个输入字段值的总和应填充到第四个输入字段中(保持只读)。如何使用 html 和 javascript 做到这一点?
查看完整描述

3 回答

?
收到一只叮咚

TA贡献1821条经验 获得超4个赞

您可以使用onmouseout事件来获取所有三个字段的总和。首先创建一个方法getSum并使用它onmouseout来执行。

function getSum(){

    //Fetch value from all input fields

    let first  = document.getElementById('field1').value;

    let second = document.getElementById('field2').value;

    let third  = document.getElementById('field3').value;

    let fourth = document.getElementById('field4');


    //Calculate the sum 

    let sum = Number(first)+Number(second)+Number(third);


    //Assign the sum to the fourth field

    field4.value = sum;

  }

<!DOCTYPE html>

  <html>

  <body>

    <h3>Enter Number:</h3>

    <label>First:</label>

    <br> 

    <input type="number" id="field1">

    <br>

    <label>Second:</label>

    <br> 

    <input type="number" id="field2">

    <br>

    <label>Third:</label> 

    <br>

    <input type="number" id="field3" onmouseout="getSum()">

    <br>

    <label>Sum:</label>

    <br> 

    <input type="number" id="field4" disabled> 

  </body>

  </html>



查看完整回答
反对 回复 2023-10-10
?
呼如林

TA贡献1798条经验 获得超3个赞

您可以使用 onmouseout 事件来调用填充第四个字段的 javascript 函数。

查看完整回答
反对 回复 2023-10-10
?
皈依舞

TA贡献1851条经验 获得超3个赞

function mouseEvt(scope){

  let in1 =parseInt( document.querySelector('input[name=in1]').value);

  let in2 =parseInt( document.querySelector('input[name=in2]').value);

  let in3 =parseInt( document.querySelector('input[name=in3]').value);

  document.querySelector('input[name=in4]').value=in1+in2+in3;

}

<input type="text" name="in1" readonly value="1"/>

<input type="text" name="in2" readonly value="1"/>

<input type="text" onmouseout="mouseEvt(this)" name="in3" readonly value="1"/>

<input type="text" name="in4" readonly/>


查看完整回答
反对 回复 2023-10-10
  • 3 回答
  • 0 关注
  • 78 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信