将用户文本输入添加到 url答案

【问题标题】：Add user text input to url将用户文本输入添加到 url
【发布时间】：2018-06-15 20:35:46
【问题描述】：

我正在创建一个站点，并有一个文本字段，您可以在其中输入文本，它会将自身附加到 url。现在我的系统有点工作，但是页面不会显示。

这是我的代码：

<script>
    function changeText2() {
        var userInput = document.getElementById('userInput').value;
        var lnk = document.getElementById('lnk');
        lnk.href = "http://jwallach.prepdev.org/" + userInput;
        window.location = "http://jwallach.prepdev.org/" + userInput;
    }
</script>   

Link <a href="" id=lnk>nothing </a>
<br>
<input type='text' id='userInput' value=' ' />
<input type='button' onclick='changeText2()' value='Change Link' />

但是，由于 URL 前面的 %20，无法找到该页面。我该如何解决这个问题？ Site

【问题讨论】：

标签： javascript html css append

【解决方案1】：

要么从输入中删除前导空格：

<input type='text' id='userInput'/>

...或修剪内容：

function changeText2(){
  var userInput = document.getElementById('userInput').value.trim();
  var lnk = document.getElementById('lnk');
  lnk.href = "http://jwallach.prepdev.org/" + userInput;
  window.location = "http://jwallach.prepdev.org/" + userInput;
}

后者是一个更好的主意，因为前导/尾随空格是用户在字段中键入/粘贴时常犯的错误。

如果用户没有故意输入 URL 的一部分，您还应该确保对他们的输入进行URL 编码，以防他们的输入包含非 URL 安全字符：

lnk.href = "http://jwallach.prepdev.org/" + encodeURIComponent(userInput);

【讨论】：

【解决方案2】：

简单，只需从输入值中删除 %20 即可。 :)

所以这个..

<input type='text' id='userInput' value=' ' />

变成这个..

<input type='text' id='userInput' value='' />

【讨论】：

【解决方案3】：

只需更改：<input type='text' id='userInput' value=' ' />

对此：<input type='text' id='userInput'>

由于value 属性，space 或%20 是输入标签内的默认值。 %20 只是 space 的 ASCII 编码参考值。详细了解 ASCII 值参考here。

在按几次退格键后开始输入值，或者只是将value=" " 更改为value="" 或直接删除value 属性，它会立即解决问题。

如果用户误按空格，%20 将再次弹出。所以你可以做的是，修剪输入。

在您的脚本标签中进行以下更改。

<script>
  function changeText2(){
var userInput = document.getElementById('userInput').value.trim();
var lnk = document.getElementById('lnk');
lnk.href = "http://jwallach.prepdev.org/" + userInput;
window.location = "http://jwallach.prepdev.org/" + userInput;
}
</script>

希望对您有所帮助。 :)

【讨论】：