Question

我有一个清晰的按钮需要放在输入框内。

主要问题是表单的方向会根据屏幕大小不断变化。

我阅读了以下问题，但在所有问题中，表格都是水平或垂直的。 1 2 3 4

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>
.top-container {
    width: 76%;
    float: left;
    height: 100%;
    padding-right: 45px;
}
.links a, .login button, .login input{
    display: inline-block
}
.login-form-input {
    width: 100%;
    height: 40px;
    border: 1px solid #000;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 10px;
    margin-left: 3px;
}
@media only screen and (max-width:600px) {
    .login input {
        width: 100%
    }
}
@media ( min-width :601px) and ( max-width :767px) {
    .login input {
    width: 44%
}
}
@media ( min-width :768px) and ( max-width :900px) {
    .login input {
    width: 49%;
}
}
@media ( min-width :1200px){
    .login input {
    width: 45%;
}
}
.searchclear {
    position:absolute;
    right:5px;
    top:0;
    bottom:0;
    height:14px;
    margin:auto;
    font-size:14px;
    cursor:pointer;
    color:red;
}
</style>
</head>
<body>
<header>
            <div class="top">
                <div class="top-container">
                    <div class="login">
                        <form id="myForm" role="form" action="#" method="GET">

                            <input  id="input1" name="input1"
                                class="form-control login-form-input searchinput" type="text" value="">
                                <span class="searchclear glyphicon glyphicon-remove-circle" style="display:block"></span>

                            <input id="input2" name="input2" class="form-control login-form-input searchinput"
                                type="text" value="">
                                <span class="searchclear glyphicon glyphicon-remove-circle" style="display:block"></span>

                            <button class="submit-button" type="submit" title="Submit">
                                <div>Submit
                                </div>
                            </button>
                        </form>

                    </div>

                </div>
            </div>
</header>
<script
        src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<script>
$(document).ready(function () {
    $(".searchinput").keyup(function () {
        $(this).next().toggle(Boolean($(this).val()));
    });
    $(".searchclear").toggle(Boolean($(".searchinput").val()));
    $(".searchclear").click(function () {
        $(this).prev().val('').focus();
        $(this).hide();
    });
});
</script>
</body>
</html>

Answer 1

您可以使用has-feedback类中内置的Bootstrap将图标放在输入字段中。

$(document).ready(function() {
  $(".hasclear").keyup(function() {
    var t = $(this);
    t.next('span').toggle(Boolean(t.val()));
  });

  $(".clearer").hide($(this).prev('input').val());

  $(".clearer").click(function() {
    $(this).prev('input').val('').focus();
    $(this).hide();
  });
});

.login .glyphicon-remove-circle {
  padding-top: 2px;
  cursor: pointer;
  pointer-events: auto;
}
.top-container {
  width: 76%;
  float: left;
  height: 100%;
  padding-right: 45px;
}
.links a,
.login button,
.login input {
  display: inline-block
}
.login .form-group .login-form-input {
  width: 100%;
  height: 40px;
  border: 1px solid #000;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-bottom: 10px;
  margin-left: 3px;
}
@media only screen and (max-width: 600px) {
  .login input,
  .login .form-group {
    width: 100%;
  }
}
@media (min-width: 601px) and (max-width: 767px) {
  .login input,
  .login .form-group {
    width: 44%;
    display: table-cell !important;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .login input,
  .login .form-group {
    width: 49%;
    display: block !important;
  }
}
@media (min-width: 1200px) {
  .login input,
  .login .form-group {
    width: 45%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<header>
  <div class="top">
    <div class="top-container">
      <div class="login">
        <form id="myForm" role="form" action="#" method="GET" class="form-inline">
          <div class="form-group has-feedback">
            <input id="txt1" type="text" class="login-form-input form-control hasclear" placeholder="Textbox 1" /> <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>

          </div>
          <div class="form-group has-feedback">
            <input id="txt1" type="text" class="login-form-input form-control hasclear" placeholder="Textbox 1" /> <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>

          </div>
          <button class="submit-button" type="submit" title="Submit">
            <div>Submit</div>
          </button>
        </form>
      </div>
    </div>
</header>

Answer 2

<div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Submit</button>
      </span>
</div>

这应该把提交按钮放在输入里面。让我知道它是否适合你

无法正确定位清除按钮

2 个答案: