Question

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

这是我的代码：

<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

Answer 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;
}

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

如果用户没有故意输入部分网址，您还应确保输入网址，以防他们的输入包含非网址安全字符：

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

Answer 2

简单，只需从输入值中删除％20即可。：）

所以这个..

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

成为这个..

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

Answer 3

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

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

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

要么在退回退格键几次后开始输入值，要么只需将value=" "更改为value=""，或者只需删除value属性即可立即解决问题。< / p>

如果用户误操作空间，%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>

希望它有所帮助。：）

将用户文本输入添加到url

3 个答案: