[英]Copy the a href value to a textbox onclick
我正在尝试将链接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/
您可以将点击处理程序添加到#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
}
}
演示: 小提琴
使用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();
});
})
演示: 小提琴
由于标记了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>
像这样在页面加载时使用点击触发器,如果您愿意尝试一下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>
您也可以使用实时jQuery单击
$(document).on('click','.service1,.service2',function(){
$("#textbox").val($(this).html());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.