如何修复URL追加用户输入时因%20导致页面无法访问的问题

这个问题的核心是输入文本包含空格（包括输入框默认的空格和用户可能误输入的首尾空格），空格在URL中会被自动编码为%20，导致服务器无法识别正确的路径。我们可以通过两步操作彻底解决这个问题：

具体修复方案 #

• 清除输入框默认空格：你的输入框初始值设置了一个空格value=' '，这会导致即使用户什么都不输入，也会把空格拼到URL里，先把这个默认值去掉。
• 处理用户输入的首尾空格：使用字符串的trim()方法去除用户输入文本的首尾空格，避免误输入的空格干扰路径。
• 可选优化：空输入判断：如果用户没输入有效内容，不要执行跳转，避免跳转到无效的根路径（你也可以根据需求调整为跳转到默认页面）。

修改后的完整代码 #

<script>
function changeText2() {
  // 获取输入内容并去除首尾空格
  var userInput = document.getElementById('userInput').value.trim();
  
  // 空输入时给出提示并终止执行
  if (!userInput) {
    alert('请输入有效内容');
    return;
  }
  
  var lnk = document.getElementById('lnk');
  var targetUrl = "http://jwallach.prepdev.org/" + userInput;
  lnk.href = targetUrl;
  window.location = targetUrl;
}
</script>

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

改动说明 #

1. 将输入框的value=' '改为value=''，消除默认的初始空格。
2. 给userInput添加.trim()方法，确保输入文本的首尾没有多余空格，从源头避免%20的产生。
3. 增加空输入判断，防止用户误点击按钮后跳转到无效路径，提升交互体验。

这样修改后，URL里就不会出现%20了，页面也能正常访问啦！

内容的提问来源于stack exchange，提问作者Jude Wallach