将 a href 值复制到文本框 onclick答案

【问题标题】：Copy the a href value to a textbox onclick将 a href 值复制到文本框 onclick
【发布时间】：2015-08-19 22:52:01
【问题描述】：

我正在尝试将链接 onClick 的值（显示的名称）复制到文本框。有可能吗？

以下是我的草率尝试 -

<div class="service_list">
    <ul style="list-style-type:square; display:none;" id="ullist">
        <li><a href="#" class="service1">Service 1</a>

        </li>
        <li><a href="#" class="service2">Service 2</a>

        </li>
    </ul>
</div>
<input type="text" id="textbox" />
<br />
<table>
    <tr>
        <td>
            <div class="button">    <a href="#" download="servicename.txt" class="button" id="button">Download</a>

            </div>
        </td>
        <td>
            <div class="list">  <a href="#" class="list" id="list">List of Services</a>

            </div>
        </td>
    </tr>
</table>

这里是 JS -

var link_selected = document.querySelector('.service_list'); //edited
var input_field = document.getElementById("input");
link_selected.onclick = function (e) {
    var selected = document.querySelector('.service_list').value; //edited
    input_field.value = selected;
};

这里是相同的 JSFiddle： https://jsfiddle.net/aishwarya26/rebpb5h2/

【问题讨论】：

更正您的代码，service_list 是一个类而不是 id，您使用的是#service_list 而不是 .service_list
感谢您指出这一点。我会马上解决的。
查看jsfiddle.net/rebpb5h2/2
为什么你在这个问题上标记了 jQuery，你似乎在使用 DOM？
那是因为我也对 JQuery 解决方案持开放态度

标签： javascript jquery html href

【解决方案1】：

您可以为#ullist 元素中的每个链接添加点击处理程序，然后设置文本框的值

var text = document.getElementById('textbox');
var anchor = document.querySelector('#button');

var links = document.querySelectorAll('#ullist a');
for(var  i = 0;i< links.length;i++){
    links[i].onclick = function(){
        text.value = this.textContent || this.innerText
    }
}

演示：Fiddle

使用 jQuery

jQuery(function($){
    var $text = $('#textbox');
    $('#ullist a').click(function () {
        $text.val($(this).text());
    });

    $('#button').click(function (e) {
        var textbox_text = $text.val();
        var textbox_file = new Blob([textbox_text], {
            "type": "application/bat"
        });

        this.href = URL.createObjectURL(textbox_file);
        this.download = "servicename.txt";
    });

    $('#list').click(function (e) {
        $('#ullist').toggle();
    });
})

演示：Fiddle

【讨论】：

【解决方案2】：

由于 JQuery 被标记，这可以简单地用 JQuery 完成！

$(document).on('click', 'a', function(e) {
    e.preventDefault();
    //e = $(this).attr('href');//this gets the href
    e = $(this).text();//This gets the text
    $('input').val(e);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly>
<a href="http://google.com">Google<a>
<a href="http://booble.com">Booble<a>
<a href="http://doodle.com">Doodle<a>
<a href="http://coocle.com">Coocle<a>
<a href="http://roorle.com">Roorle<a>

【讨论】：

实际上这复制了 URL，我只想要链接显示的值。
@AishwaryaL 那么你需要修改你的问题 - 这个答案是你提出的问题的正确答案。
我确实在问题中写了（显示的名称）。也许我提出的问题有点模棱两可。
添加了获取<a>标签内的值的代码，并留下了获取href的代码作为注释！
我认为@gnack 指的是问题本身：*将 a href 值复制到文本框 onclick *

【解决方案3】：

你也可以使用实时 jquery 点击这个

$(document).on('click','.service1,.service2',function(){
    $("#textbox").val($(this).html());
});

【讨论】：

【解决方案4】：

像这样在页面加载时使用点击触发器，如果您愿意涉足一点 jquery：

    $('a').click(function(){
        $('#textbox').val($(this).html());
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service_list">
    <ul style="list-style-type:square; display:none;" id="ullist">
        <li><a href="#" class="service1">Service 1</a>

        </li>
        <li><a href="#" class="service2">Service 2</a>

        </li>
    </ul>
</div>
<input type="text" id="textbox" />
<br />
<table>
    <tr>
        <td>
            <div class="button">    <a href="#" download="servicename.txt" class="button" id="button">Download</a>

            </div>
        </td>
        <td>
            <div class="list">  <a href="#" class="list" id="list">List of Services</a>

            </div>
        </td>
    </tr>
</table>

【讨论】：

var select = document.querySelector('a#list');我认为这应该是 var select = document.querySelector('#list');