Javascript 如何用按钮的值清除并替换输入字段的内容？_Javascript_Jquery_User Input

Javascript 如何用按钮的值清除并替换输入字段的内容？

javascript jquery

Javascript 如何用按钮的值清除并替换输入字段的内容？,javascript,jquery,user-input,Javascript,Jquery,User Input,我认为有一个简单的解决办法，但我已经寻找，似乎找不到答案。我正在尝试设置几个按钮，当按下按钮时，用按钮的值替换输入字段的内容。如果可能的话，我宁愿使用纯javascript而不是jquery来控制它此外，如果可能的话，我希望按钮的标题与它传递到输入字段的值略有不同。一种方法脚本： function foo(id, el) { document.getElementById(id).value = el.innerHTML.replace(/test/, 'something'); }

我认为有一个简单的解决办法，但我已经寻找，似乎找不到答案。我正在尝试设置几个按钮，当按下按钮时，用按钮的值替换输入字段的内容。如果可能的话，我宁愿使用纯javascript而不是jquery来控制它

此外，如果可能的话，我希望按钮的标题与它传递到输入字段的值略有不同。

一种方法

脚本：

function foo(id, el)
{
  document.getElementById(id).value = el.innerHTML.replace(/test/, 'something');
}

（显然，您希望做一些对值更有用的事情，而不是用某些东西替换测试。但是您可以。）

html:


测试123
测试234


JS-Bin
函数setText（）{
document.getElementById（“input1”）.value=“一些文本”；
}  
点击我设置文本！

完整的JSBin示例：

假设此标记（一个额外的数据属性，以避免硬编码选择器）：

演示：

这是一个完整的jQuery解决方案

<input type='text' id='target'></input>

<button>Merry</button>
<button>Christmas</button>

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script>
function setText() {
  document.getElementById("input1").value = "SOME TEXT";
}  
</script>
</head>
<body>
  <button type="button" onclick="setText()">Click me to set text!</button>
  <input id="input1" type="text">
</body>
</html>

<input id="target" type="text">
<button value="potatoes" data-for="#target">Potato</button>
<button value="tomatoes" data-for="#target">Tomato</button>

var buttons = document.querySelectorAll('button[data-for]');

for (var i = 0; i < buttons.length; i++) {
    var targetId = buttons[i].dataset.for;
    var target = document.querySelector(targetId);

    buttons[i].addEventListener('click', function () {
        target.value = this.value;
    })
}

<input type='text' id='target'></input>

<button>Merry</button>
<button>Christmas</button>

$(function() {
    var $target = $('#target');
    $('button').on('click', function() {
        $target.val($(this).html());
    });
});