如何使用html中的href传递输入字段值？

Question

我想将一个整数值从 href 传递到输入字段值。假设 example.com 是有 1 个输入字段的网页。我想做类似href="www.example.com" value="12345" 点击这里 1href="www.example.com" value="125"点击这里 2如果用户点击这里 1然后输入字段在 example.com 中必须填写 12345 值，如果用户单击“单击此处 2”，则 example.com 中的输入字段必须填写 125 值。（用户无需输入该值）

Answer 1

好吧，根据我的理解，这就是你想要做的 - 你有两个链接

链接1 - 点我！链接 2-不，请点击我！

如果用户单击链接 1，他们将看到一个包含值的输入字段。输入的值将是链接的值。如果单击链接 2，将向他们显示一个包含链接二值的输入字段。

实现这一点相当简单，只需设置一个简单的 javascript 函数，该函数在单击每个链接时就会发生。

例如 const linkOne = document.querySelector('.linkOne'); const inputOne = document.querySelector('.inputOne'); linkOne.addEventListener("click", function() { inputOne.value = linkOne.getAttribute('value'); }); ，然后您将对链接二执行相同的操作。

getAttribute 可以帮助您获取元素的任何属性，我们不会使用 .value 因为这会返回链接。

Answer 2

以下是您将如何做到的。在 HTML 中创建两个按钮 Click here 1 和 Click here 2 在属性 onmousedown 中给它们函数名称 showResult1 和 showResult2 并创建一个 id 为“answer”的输入，然后在 Script 标签中定义两个变量 a 和 b 并为它们分配整数值 12345和 125 并使用您在两个按钮“showResult1”“showResult2”的 onmousedown 属性中在 html 中定义的名称创建两个函数，并通过 document.getElementById 获取输入的 Id“answer”，并为它们提供 a 和 b 值

var a = 12345;

var b = 125;

function showResult1() {

  document.getElementById("answer").value = a;

}

function showResult2() {

  document.getElementById("answer").value = b;

}

<button id="btn" onmousedown="showResult1()">Click here 1</button>

<button id="btn" onmousedown="showResult2()">Click here 2</button>

<br><br>

<input id="answer" readonly>

Answer 3

为了解决这个问题，您有多种选择，例如普通 JavaScript 或使用jQuery 库（如我与您共享的代码片段中所示），结果将是相同的。

如果运行此代码片段，您会注意到，当用户单击任何链接时，输入会自动填充您在请求描述中提供的值。请继续在您的代码中实现这一点，但不要忘记将 jquery 库添加到您的 html 主文件中，以便您使用它。

我当然希望这能有所帮助，伙计。祝你有美好的一天，继续编码，这是一次伟大的冒险！

$(document).ready(function() {

    $("#clickHere01").click(function() {

      $("#txtValues").val("12345");

    });

    

    $("#clickHere02").click(function() {

      $("#txtValues").val("125");

    });

    

    

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<hr>

<h3>Welcome to the www.example.com website</h3>

<p>Please click the below links to fill up this textbox:<br />

    <input type="text" id="txtValues" value="">

</p>

<a href="#" id="clickHere01">Click here 1</a>

<a href="#" id="clickHere02">Click here 2</a>

Answer 4

寻找我的样品：这就是你想要的吗？

$("#btn_1").on("click",function(){

    $("#data_1").val($(this).val());

});

$("#btn_2").on("click",function(){

    $("#data_1").val($(this).val());

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

    <button id="btn_1" value="12345">Click here 1</button>

    <button id="btn_2" value="125">Click here 2</button>

    

    <input id="data_1" type="text" value="" readonly>

</div>