Question

我正在尝试创建一个输入字段，允许用户输入一旦提交后附加到域名的文本字符串，将用户带到页面。

流程如下：

用户在输入框中输入'foo'。单击提交后，'foo'以http://example.com/为前缀，（理想情况下）以.html（或.php）为后缀，浏览器将解析为该地址，即http://example.com/foo.html。

这可能吗？我的表格kung foo（显然）不是很强，所以任何帮助都会受到赞赏。在其他Stack用户的帮助下，我已经做到了这一点：

<html> 
<head> 
</head> 
<body> 

<form id="inputbox"> <input type="text" id="addition"> <input type="submit" value="Trigger"/></form> 

<script> 
var yourForm = document.getElementById("inputbox"); 
yourForm.onsubmit = function() { 
var URLtext = document.getElementById("addition").value; 
window.location = window.location.href + URLtext; // this is for your current URL 
} 
</script> 
</body> 
</html>

Answer 1

最好不要一般使用表单，因为它会在单击提交输入时尝试提交自己。相反，只需使用两个输入元素并手动将click事件绑定到提交输入。

<input type="text" id="addition">
<input type="submit" id='submit' value="Trigger"/>

<script>
document.getElementById('submit').addEventListener('click', function() {
    var input = document.getElementById('addition'),
        text = input.value;
    // You can further edit the input text here, (i.e. append ".html", etc)
    window.location = window.location.origin + '/' + text;

});
</script>

通过输入字段将页面附加到域名

1 个答案: