Question

我正在使用javascript appendchild添加mor表单元素，如果需要但是当元素的数量增长大于窗口大小时我有问题。它让窗户跳到顶部，令人讨厌。我让div高得足够大但它没有用。

<div class="topnav" id="myTopnav">
  <a href="javascript:void(0);" style="font-size:15px;" class="icon active" onclick="myFunction()">&#9776;</a>

  <a href="#home" class="aactive">Home </a>
  <a href="#news">Edit</a>
  <a href="#about">Logout</a>
</div> 

<div class="frameHolder" id="frame1">
<fieldset class="frame">
<legend>information : </legend>
    <form action="#" method="post" id="contactform">
    <ul>
        <li class="liner">mobile :    </li>
        <li><input type="tel" name="mobiles[]" id="mobile0" class="txtfield" placeholder="09112345678" onBlur="mobilecheck('mobile0')"><a href="#" onClick="addfield('mobiles')"><font class="char">&#43;</font></a></li>
   <span class="error">A valid url is required</span>
       <li id="mobiles"> </li>      

        </ul>
        </form>
    </fieldset> 
</div>

javascript部分是

<script>
var mobileCounter=0;
function addfield(args){

    var x = document.createElement("li");
    y=document.createElement("input");
    document.getElementById(args).appendChild(x);
if(args == "mobiles"){
    mobileCounter++;
    var idcounter="mobile" + mobileCounter;

    x.innerHTML="<input type=\"text\" id=\""+idcounter+"\" onblur=\"mobilecheck('"+idcounter+"')\" class=\"txtfield\">";
}
}
</script>

css是

@font-face {
    font-family: iransans;
    font-style: normal;
    font-weight: normal;
    src: url("/fonts/IRANSansWeb_Bold.eot");
    src: url('/fonts/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
    url('/fonts/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
    url('/fonts/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('fonts/IRANSansWeb_Bold.ttf') format('truetype');
}
a{
    text-decoration: none;
}

body {
    font-family: iransans;
    font-size: 12px;
  margin: 0;
  /*font-family: Arial, Helvetica, sans-serif;*/
}

.topnav {
  overflow: hidden;
  background-color: #E7FD00;
}

.topnav a {
  float: right;
  display: block;
  color: #020202;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}

.topnav a:hover {
  background-color: #E00D00;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 400px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 400px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 1px;
      float: right;
    top: 0px;
  }
}
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;

  }

     .topnav.responsive .aactive {
      margin-top: 50px;
  }
    .frameHolder {
        margin: auto;
        margin-bottom: 40px;
        width: 300px;
        /*border: dotted #04F144;*/
    }

.frame{
    margin-top: 50px;
    border: solid #6F05E4;
    border-radius: 3%;
    padding:  20px 15px;
    direction: rtl;

}
li{
    display: block;
    text-decoration: none;
    /*border: solid #FF0C10;
    width: 200px;*/
    direction: rtl;
    text-align: right;
}

li .txtfield{
    width: 150px;

}
.char{
font-size: 24px;
    font-weight: bolder;
    color: #167C0A;
    margin-right: 5px;
}
.buffer{
    display: none;
    width: 1px;
    height: 0px;
    overflow: hidden;
}
.checkboxLabel{
    display: block;
    padding: 10px;
}
.button{
    padding: 5px 8px;
    margin-top: 12px;
    margin-left: 10px;
    border: solid 1px #14D14D;
    background-color: #F59F11;
    color:#090398;
    font-weight: bolder;

}
ul{
    margin-right: 25px;
    padding-right: 1px;
    width: 200px;
}

这是来自appendchild方法或它在css设计中的问题吗？我做了很多搜索，但没有答案。

Answer 1

跳跃是由链接中的href="#"引起的：

<a href="#" onClick="addfield('mobiles')">…</a>

#不是什么都不做的网址 - 它是链接到页面顶部的URL fragment。这是锚链接功能的扩展，其中指定元素的id（例如#footer）会将页面滚动到具有id的元素。

要防止链接在单击时滚动窗口，您有两个选项：

将href更改为javascript:void(0)，这是一个无操作的JavaScript网址。
在onclick处理程序addfield中，将click事件作为参数并在其上调用preventDefault()以防止默认滚动行为：
```
function addfield(event) {
    // your code to add the field
    event.preventDefault();
}
```

有关在这些选项之间进行选择的帮助，请参阅Which href value should I use for JavaScript links, # or javascript:void(0)?

跳窗口添加儿童元素

1 个答案: