将文本输入到另一个输入字段时清除输入字段

Posted

技术标签:

【中文标题】将文本输入到另一个输入字段时清除输入字段【英文标题】:clear input field when text is entered into another input field 【发布时间】:2021-11-22 22:33:27 【问题描述】:

我有一个 Currency Converter ,由两个字段和一个按钮组成。在第一个字段中,我输入要转换的金额,在第二个字段中,我得到转换的结果。 问题是: 当我在第一个字段中键入文本时,如何使用转换结果清理第二个字段中的文本?使用 javascript / Jquery 函数?

提前致谢。

这是我的代码:

function convertiLireInEuro() 
var importoInserito = $('#txtLireEuro').val();
importoInserito = importoInserito.replace(/,/g, '.');
var lire = parseFloat(importoInserito)
var euro = lire * 1000 / 1936.27
euro = euro.toFixed(2);
euro = Math.round(euro);

$('#txtConversione').val(euro); 

html

<input type="text" id="txtLireEuro" name="txtLireEuro" style="text-align:right" onkeypress="return onlyNumbers(event);" /> &nbsp;000&nbsp;₤
                                <input value="Converti in Euro" type="button" id="btnLireEuro" name="btnLireEuro" style="margin-left: 20px" onclick="convertiLireInEuro();highlightAndCopyText();"/>
                                     <input type="text" id="txtConversione" name="txtConversione" style="text-align:right;margin-left:20px" readonly />&nbsp;€
                                     <span class="Label" style="margin-left:12px">(importo già arrotondato all’intero e incollabile nel campo desiderato)</span>

【问题讨论】:

请阅读 How to Ask,在 SO 或 google 上进行一些搜索,尝试编码,如果您卡在这里发帖 minimal reproducible example 分享你的代码 如果任何答案解决了您的问题,请考虑接受它作为答案 【参考方案1】:

HTML 代码

<body>
 <input type="text" id="input_box">
 <input type="text" id="result_box">
</body>

JQuery 代码

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() 
   $("#input_box").keydown(function()
       $("#result_box").val("");
   )
);

</script>
<body>
<input type="text" id="input_box">
<input type="text" id="result_box">

</body>

当“Input_box”被点击时,result_box 将被清除 这是价值。

【讨论】:

我在输入字段而不是焦点时需要它。谢谢:) @GiovanniBGemini 好的,使用 keydown 而不是 focus @GiovanniBGemini 代码根据您的需要编辑【参考方案2】:

这里是你需要的,我贴一个编码sn-p。我有 2 个字段,typing-fieldfield-to-reset。如果您先在field-to-reset 中填写一些文字,然后开始输入typing-fieldfield-to-reset 将重置。

let typing = document.getElementById("typing-field");
let reset = document.getElementById("field-to-reset");

typing.addEventListener("keydown", () => 
  reset.value = "";
)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>Typing field:</div>
  <input id="typing-field" type="text">
  <div>Field to reset:</div> 
  <input id="field-to-reset" type="text"> 
</body>
</html>

【讨论】:

addEventListener 的部分去哪了?在我看来这是出乎意料的表达 如果它是一个 js 文件,请确保将 src 放在最后。或者如果你写 &lt;script&gt; 把它放在你的 &lt;body&gt; 标签后面【参考方案3】:

您已经有一个名为 onlyNumbersonkeypress 事件侦听器。您可以简单地将$('#txtConversione').val = ""; 放入该函数中。

【讨论】:

以上是关于将文本输入到另一个输入字段时清除输入字段的主要内容,如果未能解决你的问题,请参考以下文章

将文本输入从一个字段复制到另一个字段

如何使用Jquery清除html输入文本字段的内容

在切换视图时清除文本字段和文本视图视图的数据

如何使用文本字段将数字输入数组(swift3)

文本输入字段 CSS 样式

在不同页面中将输入字段从一个复制到另一个