javascript - 从当前单击按钮的值 jquery/js 在输入占位符中插入文本

Question

我正在努力实现的目标

以图片为参考，我想按下按钮以将其值（在本例中为字母“D”）发送到输入占位符内的黄色文本区域。

单击“D”按钮后的一个工作示例将在输入字段“在字母“D”中搜索标题或作者...”中显示此内容

那么问题是：使用 jquery/js 如何将点击的字母带到搜索输入的占位符？

我试过的

我尝试了 jQuery 和 JavaScript 来实现这一点。但似乎我在这里仍然缺少一些东西。

JS：

onclick = function(){
  document.getElementById("#myInput").placeholder = "Search for a title or an author within the letter "+this.dataset.letter;

jQuery：

$(".letters").click(function(){
    var inputText = $(".letters").val();
    $("#myInput").attr("placeholder", "Search for a title or an author within the letter").val(inputText).focus().blur();
});

我能提供什么

如果相关，我的按钮是使用 jQuery 从数据集创建的，如下所示。

var letters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

    for (var i in letters){
        $("#letterlinks").append('<button class="table-sort letters" id="#letters" href="%">' + letters[i]);
        $(".table-sort.letters").on('click', function(){
            $(".table-sort.letters.selected").removeClass('selected');
            $(this).addClass('selected');
        });
    }

html:

<div class="table-search">
     <input type="text" id="myInput" onkeyup="searchInput()" placeholder=""><span class="icon"><i class="fa fa-search"></i></span></input>
</div>

如果您需要任何其他信息，我会尽快为您提供。提前感谢您的时间！

标签： javascriptjqueryhtml

Answer 1

使用事件获取被点击按钮的对象。

$(".table-sort.letters").on('click', function(event) {
    $(".table-sort.letters.selected").removeClass('selected');
    $(this).addClass('selected');

    $("#myInput").attr("placeholder", "Search for a title or an author within the letter " + event.target.innerText);
});