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>

问题是......当我点击生成的链接不能正常工作时，请带我到localhost /我想出去....

Answer 1

1）使用onsubmit并返回false
2）测试场不空 3）如果你坚持redir必须是http://aaa.bbb.ccc

，那么只使用type = url

如果您想允许用户键入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">，以便浏览器确保仅提交网址然后修改：

 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');
    }
}

链接生成器JavaScript

2 个答案: