获取一个值来反映另一个值

Question

我正在努力使 field2 显示在 field1 中输入的任何值。我正在使用 onchange 事件来执行此操作。

field1 是一个输入文本框，因此如果 field1=“Mary”，field2 应显示为“Mary”。

如果 field1 说“花生酱和果冻”，field2 应该说“花生酱和果冻”。

如果字段 1 留空，则字段 2 也应留空。

现在我有一个代码可以让 field2 复制 field1，但我必须给它一组预定值，我希望它具有代码功能，这样用户就不会局限于我提供的输入选项。

这现在很有效：

if (filed1.value=='Hello') {filed2.value='Hello'} 否则{filed2.value='';}

我需要它说的是

if (field1.value=='anything at all') {filed2.value='whatever was put in filed1'}

其他{field2.value='';}

Answer 1

我不确定我是否正确理解了你的问题，但我想你想验证该字段是否为空。

function mirrorValue(event){
  let val = event.target.value;

  if(val != null){
    field2.value = val;
  }
else{
   field2.value = null;
}
}

然后在你的元素上放：

onchange="mirrorValue($event)"

希望这就是你想做的。

Answer 2

您不需要 if 语句。相反，您可以使用 field1 的 onchange 或 keyup 事件来设置 field2 的值。这是一个使用 jQuery 的示例站点。如果您希望我将其设为标准，请告诉我 Javascript。

Html:

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="Content/Site.css" type="text/css" />
    </head>
    <body>
        <div class="container">
            <h1>Text2 mirrors Text1</h1>
            <p>Enter some text in Text1 and Text2 will mirror the input.</p>
            <h3>Text1</h3>
            <input type="text" id="txt1" />
            <h3>Text2</h3>
            <input type="text" id="txt2" />
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="Scripts/Site.js"></script>
    </body>
</html>

Css 文件（仅仅因为，并非必需，您可以将其删除，只需确保删除上面 html 中的引用即可）。

/*Site.css*/

html {
    
}

body {
    
}

.container {
    width: 80%;
    margin: auto;
}

这是最重要的部分 - 更新 field2 的值以匹配 field1 的值。这是 html 文件中 body 标签元素底部引用的 Javascript 文件。

// Site.js

$(document).ready(function() {
    // $("#txt1").change(function() {
    //  $("#txt2").val(this.value);
    // });

    $("#txt1").keyup(function() {
        $("#txt2").val(this.value);
    });
});

我已经注释掉了更改事件函数，激活了 keyup 函数。这将为您提供有关值的实时更新。您可以根据需要将其更改为使用第一个函数的 onchange 事件并注释掉 keyup 函数，但在字段 1 失去焦点之前它不会更新字段 2。

我不确定您为什么要使用 if 语句来检查 field1 的值。但是，这不是必需的，如果您有特定原因想要告诉我，我会更新我的答案。

编辑

这是 javascript 页面，仅使用 Javascript:

    // document.getElementById('txt1').onchange = function() {
    //  document.getElementById('txt2').value = this.value;
    // }

    document.getElementById('txt1').onkeyup = function() {
        document.getElementById('txt2').value = this.value;

这些是相同的 javascript 功能，只是没有 jQuery。注释掉的函数只会在 field1 失去焦点后更改 field2 的文本，第二个（未注释的函数）将在每次击键 field1 时更新 field2。

如果您有任何其他问题，请告诉我。

获取一个值来反映另一个值

Getting a value to mirror another value

javascript

if-statement

onchange

wildcard