javascript - 使用用户输入修改链接

标签 javascript

我正在处理一个函数的一小段代码,我实际上是在另一个 question's answer 中找到的。 ,这是一个巨大的帮助。虽然,尝试修改该脚本片段给我带来了一些麻烦:我正在尝试更改这一点,以便它不会使用链接更改显示的文本,而是使用静态文本(如“单击此处”)修改链接) 或按钮元素。

<a id="reflectedlink" href="http://www.google.com/search">http://www.google.com/search</a>
<input id="searchterm"/>
<script type="text/javascript">
   var link= document.getElementById('reflectedlink');
   var input= document.getElementById('searchterm');
   input.onchange=input.onkeyup= function() 
      {
         link.search= '?q='+encodeURIComponent(input.value);
         link.firstChild.data= link.href;     
      }; 
</script>

我真的很想让它有一个简单的按钮,可以在新窗口中打开修改后的链接。我试过寻找类似的解决方案,但我确信我错过了它只是因为我不知道我在寻找什么。

最佳答案

Modified your fiddle :

HTML

Search <input id="searchterm" type="text" />

JavaScript

var searchterm = document.getElementById('searchterm');
var base_url = 'http://www.google.com/search?q=';
searchterm.onchange = searchterm.onkeyup = function(e) {
    e = e || event;
    if ( (e.which || e.keyCode) == 13 ){
        window.open(base_url + encodeURIComponent(searchterm.value), '_blank');
    }
};

关于 window.open 函数的更多信息 is here.

关于javascript - 使用用户输入修改链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12268987/

相关文章:

javascript - 当我尝试更新状态中的数组时,React App 变为空白

javascript - 有没有一种惯用的方法来测试嵌套状态分支?

php - 为什么这个 Javascript 函数不起作用?

javascript - 如何使 Owl Carousel 键盘可访问

javascript - 事件更改时禁用按键事件

javascript - 定期更新 Angular2 中的 Observable 值

javascript - JS如何创建一个计算主题标签数量的函数

javascript - 我需要在一段时间后关闭弹出窗口

Javascript - 如何在本地存储中动态设置值?

javascript - 使用 JavaScript 将 html 导出为 PDF