鏈接生成器JavaScript

Question

我試圖使用JavaScript生成HTML鏈接，

這是代碼。

<script type="text/javascript"> 
    function lab() {  
      var myTextField = document.getElementById('redir'); 
      var texto = myTextField.value; 
      url = "<a target='_blank' href='" + texto + "'>Click</a> Para continuar."; 
      document.getElementById("red").innerHTML = url; 
</script>  

<form name="test" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> 
Web: <input type="text" id ="redir" name="redir"><br> 
<input type="button" onClick="lab()" value="Generate code" > 

<b id="red" >Link</b> 

問題是...當我點擊生成的鏈接不起作用好，只是帶我到本地主機/我想出去....

Answer 1

1）使用的onsubmit並返回false
2）測試字段不爲空 3）只使用類型= URL如果你堅持的再導向必須是這樣的http://aaa.bbb.ccc

如果你想允許用戶鍵入google.com你需要不使用type="url"但你必須測試，如果有是http：//在前面，如果沒有，添加它，否則會基於該相對URL與窗體頁

Live Demo

<script> 
window.onload=function() { 
    document.getElementById("test").onsubmit=function() { 
    var texto = this.redir.value; 
    if (texto) { 
     // next line only needed for non-html5 aware browsers or type="text" 
     if (texto.indexOf('http://')!=0) texto = 'http://'+texto; 
     document.getElementById("red").innerHTML = "<a target='_blank' href='" + texto + "'>Click</a> Para continuar."; 
    } 
    return false; 
    } 
} 
</script>  

<form id="test"> 
Web: <input type="url" id="redir" name="redir"/><br /> 
<input type="submit" value="Generate code"/> 
</form> 
<b id="red" >Link</b> 

Answer 2

變化<input type="text" id ="redir" name="redir">到<input type="url" id ="redir" name="redir">使瀏覽器確保只有URL被提交。
然後修改：

function lab() {  
     var myTextField = document.getElementById('redir'); 
     var texto = myTextField.value; 
     url = "<a target='_blank' href='" + texto + "'>Click</a> Para continuar."; 
     document.getElementById("red").innerHTML = url; 
    } 

到：

function lab() {  
    var myTextField = document.getElementById('redir'); 
    var texto = myTextField.value; 
    if(texto != '') 
    { 
     url = "<a target='_blank' href='" + texto + "'>Click</a> Para continuar."; 
     document.getElementById("red").innerHTML = url; 
    } else { 
     alert(' please enter a valid url'); 
    } 
}