Question

我想创建一个非常（非常）简单的HTML页面，其中包含一个带有输入字段的表单，供用户提供URL。当用户在此输入字段中输入URL时，例如https://google.com，浏览器应该导航到该地址。

这听起来很简单，但我无法知道该怎么做。

Answer 1

我为你做了一个例子 - 使用jQuery：

＆＃13;

// wait for DOM ready
$( document ).ready(function() {
    // set listener for keypress on the input field with class "input-url"
    $(".input-url").keypress(function (e) {
      // on enter press
      if (e.which == 13) {
	// get input value and set it as window.location
        window.location.replace($(this).val());
        return false;
      }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="input-url" type="text">

＆＃13;

Answer 2

我将假设您对此感兴趣，这是尝试理解一些基础知识的一个步骤，而不是任何形式的生产代码。在那种情况下，你可以试试这个。

＆＃13;

<form id="myform" action="#">
  URL:<br>
  <input type="text" onChange="this.form.action=this.value" value=""><br>
  <input type="submit" value="Go">
</form>

＆＃13;

请注意，由于代码段在iframe中运行，因此适用沙盒规则。因此，只有stackoverflow网址才能在实例中使用。

Answer 3

使用网址验证。

HTML

<input type="url" id="url">

JS（没有jQuery）

// Take the input element
const urlInput = document.querySelector('#url');

// Function to call on event listener
let redirectToUrl = function (e) {
    // If enter is pressed and If it is a proper URL
    if (e.keyCode === 13 && isURL(urlInput.value)) {
        window.location.replace(urlInput.value);
    }
}

// Function to validate URL using Regex
function isURL(url) {
    const expression = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/gi;
    const regex = new RegExp(expression);
    if (url.match(regex)) {
        return true;
    } else {
        return false;
    }
}

// Add event listener to input field
urlInput.addEventListener('keypress', redirectToUrl);

HTML中的地址栏

3 个答案: