HTML内のアドレスバー

Question

ユーザーがURLを入力できるように、入力フィールドを含むフォームを含む非常に（VERY）単純なHTMLページを作成したいと考えています。ユーザがこの入力フィールドにURLを入力すると、例えば、 https://google.comの場合、ブラウザはそのアドレスに移動する必要があります。

とてもシンプルに聞こえますが、それを行う方法を見つけることができませんでした。

Answer 1

私は基本のいくつかを理解しようとしているのステップとして、あなたがこの中に興味を持っていると仮定するつもりです生産コードの形式ではありません。その静脈で、あなたはこれを試すことができます。

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

コードスニペットは、アイフレームで実行されるため、サンドボックスのルールが適用されることに注意してください。したがって、実際の例ではstackoverflow URLのみが動作します。

Answer 2

私はあなたのための例を作った - jQueryのを使用して：

// 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) { 
 
\t // get input value and set it as window.location 
 
     window.location.replace($(this).val()); 
 
     return false; 
 
     } 
 
    }); 
 
});

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

Answer 3

URL検証付き。 （jQueryのなし）

HTML

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

JS

// 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);