te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Disappearing button in HTML - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Disappearing button in HTML - Stack Overflow

    javascript - Disappearing button in HTML - Stack Overflow

    programmeradmin3浏览0评论

    I wrote a simple input field with a button in it. Code is as given below. 

    form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}
    <link href=".3.1/css/bootstrap.min.css" rel="stylesheet">
<script src=".3.1/jquery.min.js"></script>
<script src=".3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

    I wrote a simple input field with a button in it. Code is as given below. 

    form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}
    <link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

    As you can see, when I click in input field, button disappears. When I click outside that form, it reappears. But I don't want it to disappear when clicked on input field. How can I do that?

    • javascript
    • css
    • html
    Share Improve this question edited Apr 26, 2019 at 0:49 Udhay Titus 5,8694 gold badges25 silver badges42 bronze badges asked Apr 24, 2019 at 7:18 Ajay KulkarniAjay Kulkarni 3,03915 gold badges52 silver badges99 bronze badges 6
    • 3 I'm fetching this error... { "message": "Script error.", "filename": "", "lineno": 0, "colno": 0 } – Dat Boi Commented Apr 24, 2019 at 7:20
    • hmmm. I think the button is disappearing because. the text box is widens out past the button. Reduce the width of the text input and it may work... – Dat Boi Commented Apr 24, 2019 at 7:23
    • 1 The button is still there - it's just covered by the input field. You can see that the field is below the button normally and then it appears on top when you click there. – VLAZ Commented Apr 24, 2019 at 7:23
    • @AjayKulkarni it's not good practice to show search button using position: absolute on input field. Suppose you have long content in your input then your search button will overlap your content. Currently it's happening in your code. – Hassan Siddiqui Commented Apr 24, 2019 at 7:35
    • Can you explain WHY you want the button to overlap the input? Maybe we can e up with another solution. – Mr Lister Commented Apr 24, 2019 at 8:13
     |  Show 1 more ment

    9 Answers 9

    Reset to default 7

    Set z-index: 1 on #srch-term element

    use z-index while focus

     input:focus ~ .btn-primary {
     z-index: 100;
 }


    form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

 input:focus ~ .btn-primary {
     z-index: 100;
 }
    <link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

    Change the z-index in the .add-on button CSS rule to 3.

    .add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 3;
  font-size: 14px;
  padding: 5px;
}

    Just give a higher value to the z-index of your button. Probably the input highlight that places a div upon it

    form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 5;
  font-size: 14px;
  padding: 5px;
}
    <link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

    You should set position: relative to the button

    form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: relative;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}
    <link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

    As others are saying, the input field covers the button when it is focused. Try to set a permanent z-index on your input and button and make the z-index for button higher than the input's.

    form {
    width: 50%;
  }


  /* Style the search field */

  .add-on {
    position: relative;
  }

  .add-on input {
    width: 100%;
    border-radius: 0;
    z-index: 1020;
  }

  .add-on button {
    position: absolute;
    border-radius: 0;
    top: 2px;
    right: 3px;
    height: 33px;
    width: 60px;
    z-index: 2;
    font-size: 14px;
    padding: 5px;
    z-index: 1021;
  }
     <link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>
</form>

    Problem goes away if i add z-index: 1 to input and z-index: 3 to button. Can't figure out why but z-index: 2 on button doesen't seem to work.

    simply add z-index to input. the value is more than -1 and less than the button z-index

    /* Style the search field */

.add-on input {
  width: 100%;
  border-radius: 0;
  z-index: 0
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 2;
  font-size: 14px;
  padding: 5px;
}

    Solution 1 - Change z-index: 2 to z-index: 3 in .add-on button, but if your content increase the search button will overlap with content.

    form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  position: absolute;
  border-radius: 0;
  top: 2px;
  right: 3px;
  height: 33px;
  width: 60px;
  z-index: 3;
  font-size: 14px;
  padding: 5px;
}
    <link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>  
</form>

    Solution 2 - Remove position: absolute, top: 2px, right: 3px, z-index: 2 from .add-on button and update height: 33px; to height: 38px; in .add-on button, it'll display search next to input field and it'll not overlap content.

    form {
  width: 50%;
}


/* Style the search field */

.add-on {
  position: relative;
}

.add-on input {
  width: 100%;
  border-radius: 0;
}

.add-on button {
  border-radius: 0;
  height: 38px;
  width: 60px;
  font-size: 14px;
  padding: 5px;
}
    <link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js"></script>
<form class="navbar-form my-2 my-lg-0 ml-auto" role="search">
  <div class="input-group add-on">
    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
    <button class="btn btn-primary" type="submit">Search</button>
  </div>  
</form>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论