是否可以根据用户文本输入更新 url 链接？答案

【问题标题】：Is it possible to update a url link based on user text input?是否可以根据用户文本输入更新 url 链接？
【发布时间】：2011-10-29 04:20:30
【问题描述】：

例如，我知道可以在 Javascript 中做一些事情，允许用户根据用户文本输入来更新文本：

<script type="text/javascript">
function changeText2(){
var userInput = document.getElementById('userInput').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInput' value='Enter Text Here' />
<input type='button' onclick='changeText2()' value='Change Text'/>

在以下网址查看上述代码：tizag.com/javascriptT/javascript-innerHTML.php

但是，我想知道是否可以为 url 链接做类似的事情，而不是上面的代码。下面我一步一步地举例说明了我希望在用户输入文本时发生的事情：

原文链接： http://www.google.com/search?q=
文本字段中的用户输入： espn
用户单击按钮在文本字段中提交文本
最终链接： http://www.google.com/search?q=espn

感谢您的帮助...顺便说一句...如果您不能说我是个新手，那么感谢您提供详细信息。

【问题讨论】：

从“3. 用户单击按钮以在文本字段中提交文本”和“4. 最终链接”开始，这是否意味着，用户必须在不同位置单击两次，而不是单击一次，触发搜索？
如果您不需要更改“提交按钮”的内容，您最好使用表单。 jsfiddle.net/X2FkH/1

标签： javascript html url input keyword

【解决方案1】：

这是一个在你输入时更新的纯 JS：

<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>

注意：

没有内联事件处理程序属性（最好避免使用）；
同时分配 keyup 和 change，以尝试在发生键盘更新时获取键盘更新，并确保最终捕获所有其他更新；
使用encodeURIComponent()，以防搜索词包含任何非ASCII或URL特殊字符；
设置位置（链接）对象的search 属性以避免再次写出整个 URL；
设置链接内文本节点的data 以反映之后的完整 URL。不要从用户输入中设置 innerHTML，因为它可能包含 HTML 特殊字符，例如 & 和 <。

【讨论】：

哦嗬嗬，他用 input.onchange=input.onkeyup 得分
@bobince - 对你来说是一个很好的 1-up ^_^。我没有将 onkeyup 添加到我的答案中，但这是一个很好的补充：-D
你这个摇滚人 +1 正是我想要做的。我试图为谷歌做同样的事情，但对其他类似的 OpenSearch 格式 URLS 进行自定义搜索。我检查了我的反射链接 URL，然后将 link.search= 更新为比 ?= 更多。我试图在网站上模仿 Google Chrome 浏览器中“搜索引擎”的行为。谢谢！
@bobince 感谢这个例子！我怎样才能使代码没有注入?？例如，我只想在 URL 的末尾添加 /10，而不是 ?/10

【解决方案2】：

#1：你需要一些表格
#2：您需要在提交表单时进行捕捉
#3：根据表单提交修改url

这是一个演示：http://jsfiddle.net/maniator/K3D2v/show/
这是代码：http://jsfiddle.net/maniator/K3D2v/embedded/

HTML：

<form id="theForm">
    <input id='subj'/>
    <input type='submit'/>
</form>

JS：

var theForm = document.getElementById('theForm');
var theInput = document.getElementById('subj');

theForm.onsubmit = function(e){
    location = "http://jsfiddle.net/maniator/K3D2v/show/#" 
                              + encodeURIComponent(theInput.value);
    return false;
}

【讨论】：

您不需要表格。它只会增加额外的带宽。
@CraigM 如果您需要服务器端支持，您需要一个表单。
这个问题没有服务器端组件，因此您不需要表单。
@CraigM -- 如果用户禁用了 javascript -- *poof* 表单不再起作用（当没有 form 标签时）...
糟糕的设计选择？不，你的尽职尽责是值得称道的。渐进式增强要求您首先使其在没有脚本的情况下工作，然后再通过客户端的友好性对其进行平滑处理。在这种情况下这样做实际上是否有意义，或者是否过度/毫无意义，取决于代码的最终目的是什么......问题中没有足够的信息来猜测这一点！

【解决方案3】：

我建议使用跨浏览器库，例如 jQuery，而不是直接使用 JavaScript。使用 jQuery，您将为您的按钮添加一个单击处理程序，获取输入的值，构建您的 URL，并设置 window.location 以转到新的 url

jsFiddle

HTML

<input type="text" id="q" />
<input type="button" id="submit" value="submit" />

JavaScript

$(function () {
    $('#submit').click(function() {
        var url = "http://www.google.com/search?q=";
        url += $('#q').val();
        window.location = url;
    });
});

【讨论】：

我必须同意@Neal 的观点，这个问题甚至没有被标记为 jQuery。
@Craig -- 也尝试使用 form.submit 而不是 input.click ... 否则表单将被提交。
使用 jQuery 是有充分理由的。随着他的应用程序的增长，他无疑会达到需要编写一些跨浏览器执行不同的代码的地步。从 jQuery 开始（或 Zepto，如果 jQuery 对您的口味来说太大了），并且您不会将原生 DOM 操作代码与 jQuery 代码混合在一起。没有理由像您的示例中那样创建表单。您刚刚创建了过多的标记。
我不觉得 jQuery 在这里是一个糟糕的解决方案。对于新手来说，它很容易使用，就像这个人一样，而且它是跨浏览器兼容的。基本上替换任何现代 dom 操作库并做类似的事情。除非他们想要存储该数据，否则我认为不需要提交该值。因此，我真的认为这里不需要表单或提交按钮。一个简单的按钮和一些脚本应该可以完成任务/

【解决方案4】：

你可以试试这个；

<script type="text/javascript">
function changeText2(){
    var userInput = document.getElementById('userInput').value;
    var lnk = document.getElementById('lnk');
    lnk.href = "http://www.google.com?q=" + userInput;
    lnk.innerHTML = lnk.href;
}
</script>
Here is a link : <a href="" id=lnk>nothing here yet</a> <br>
<input type='text' id='userInput' value='Enter Search String Here' />
<input type='button' onclick='changeText2()' value='Change Link'/>

Check it out here

【讨论】：

【解决方案5】：

这是我在几秒钟内完成的解决方案：

<input type="text" name="prog_site" id="prog_site" value="http://www.edit-me.com" />
<a href="#" onclick="this.href=document.getElementById('prog_site').value" target="_blank">Open URL</a>

没有复杂的 javascript，不需要额外的引号或函数。只需根据您的需要编辑 ID 标签即可完美运行。

【讨论】：

【解决方案6】：

我认为这可能有用：

.btn {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
}
              
.btn:hover {
    background-color: #555;
    color: white;
}

.textinput {
  line-height: 2.5em;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossorigin='anonymous'>
  </head>
  <body>
    <form action='#' method='post'>
      <label for='ytid'>Please enter your YouTube Video ID:</label>
      <br>
      <br>
      <iframe
        href='#'
        width='287.5'
        height='250'
        frameborder='0'
        allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
        allowfullscreen
        src='https://www.youtube.com/embed/'
        id='ytvid'
      ></iframe>
      <br>
      <br>
      <input
        type='text'
        class='textinput'
        size='50'
        id='ytid'
        name='ytid'
        placeholder='m4jmapVMaQA'
        minlength='1'
        maxlength='11'
        onchange='document.getElementById("ytvid").src = "https://www.youtube.com/embed/" + this.value'
      >
      <br>
      <br>
      <button type='submit' class='btn'>Generate Subtitles &raquo;</button>
    </form>
  </body>
</html>

警告：这段代码 sn-p 在 Stack Overflow 中可能运行不好。

这样，每当文本输入发生变化时，视频就会更新。

我实际上是在制作一个 YouTube 视频字幕生成器，所以我只是在这里复制粘贴了我的代码。

【讨论】：

【解决方案7】：

<a href="www.google.com/search?q=" id="link">www.google.com/search?q=</a><br>
<input type="text" id="userInput" value="Enter your text here"><br>
<input type="button" onclick="changeText2()" value="change text">
<script>
function changeText2()
{
    var input=document.getElementById('userInput').value;//gets the value entered by user
    
    //changing the href of tag <a> by concatenatinng string "www.google.com/search?q=" and input (user input)
    document.getElementById("link").href = "www.google.com/search?q="+input;
    
    //changing the text from "www.google.com/search?q="  to "www.google.com/search?q=" + user input
    document.getElementById("link").innerHTML = "www.google.com/search?q="+input;
}

点击按钮调用函数changeText2。哪个执行任务。

【讨论】：