Javascript代码将锚链接的href更改为用户在输入框中输入的内容

Javascript code to alter the href of an anchor link to what the user is typing into an input box?

本文关键字：输入 用户 代码 链接 href Javascript      更新时间：2023-09-26

我需要动态地将屏幕上的achor链接的href更改为用户在输入框中键入的内容。如果有必要，我已经加载了jquery，或者可以使用原始javascript。

额外注意，可能或可能不重要:包含输入框和锚链接的div本身是动态的(可能或可能不在屏幕上，这取决于用户的操作)，所以我将使用jquery的"live"功能来运行代码，当div框出现时。这是必要的，因为我使用各种帖子来浏览网站(它适用于移动网络平台)。

谢谢你的帮助

编辑:嘿，谢谢你的回答我的问题，他们是伟大的，把我在正确的方向，但我已经意识到我没有通过我的问题(对不起)，我实际上想做的是附加他们的类型到现有的href的结束(这是一个Get请求到api)，所以如果他们键入"示例"它会添加"示例"到'www.apitest.com?变量='的href。如果您可以调整您的示例来做到这一点，这将非常有帮助。谢谢你。

我不知道你的页面的结构，所以你需要替换$('input')， $('a')与选择器的输入和锚根据你的页面。

var apiUrl = 'www.apitest.com?variable=';
$('input').live('keyup', function(){
    $('a').attr('href', apiUrl+$(this).val());
});

你可以这样做:

<div>
    <input type="text" id="newAnchor" />
    <p><a href="" id="addAnchor">Show Link</a></p>
</div>
脚本

$('#newAnchor').live('keyup', function(){
    var n = $(this).val();
    $('#addAnchor').attr('href','#' + n);  
});
http://jsfiddle.net/jasongennaro/Z39gt/

将鼠标悬停在链接上，随时可以看到底部栏的变化。

编辑

根据评论，你应该能够将你收到的新链接放在一个变量中并引用它。

var link = 'http://www.apitest.com?variable=';
$('#newAnchor').live('keyup', function(){
    var n = $(this).val();
    $('#addAnchor').attr('href', link + n);  
});
http://jsfiddle.net/jasongennaro/Z39gt/3/

相关文章：