Question

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

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

Answer 1

一种方法

脚本：

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

（显然你想做一些对价值更有用的事情而不是用某种东西取代测试。但你可以。）

HTML：

<input id="piet"/>

<button onclick="foo('piet',this)">test123</button>
<button onclick="foo('piet',this)">test234</button>

http://jsfiddle.net/sE2UV/

Answer 2

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

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

您可以使用value属性来存储数据：

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;
    })
}

演示：http://jsfiddle.net/dmu8N/

Answer 3

<!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>

完整的JSBin示例：http://jsbin.com/aZIyAzir/2/

Answer 4

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

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

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

然后你的jQuery：

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

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

4 个答案: