无法正确定位清除按钮答案

【问题标题】：Cannot position clear button properly无法正确定位清除按钮
【发布时间】：2015-08-04 15:18:53
【问题描述】：

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

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

我阅读了以下问题，但所有问题的形式都是水平的或垂直的。 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>

【问题讨论】：

你知道，如果你向我们展示你想要它的样子，我们会更容易提供帮助，并为你现在拥有的东西创建一个 jsfiddle，我们可以通过这种方式更快地帮助你。粘贴整个代码会使这种方式变得比需要的更难
@AbdulAhmad 感谢您的建议我没有 JSFiddle 将在创建时更新问题。
@AbdulAhmad 演示包括在内。

标签： jquery twitter-bootstrap css twitter-bootstrap-3

【解决方案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>

【讨论】：

感谢您的回答，但问题是我需要在大屏幕上显示水平方向的表单，在小屏幕上显示垂直方向的表单。您的解决方案仅适用于垂直表单。
清除按钮保持在输入字段中，无论视口如何变化，如果这就是您所说的。你试过了吗？
是的，但我注意到在您的代码中表单只是垂直的，包含演示。我要再测试一次。
您添加的代码使表单始终垂直。请在更改屏幕尺寸时查看 Demo1 链接。
看看更新后的，它不完全一样，但如果你多使用 CSS，它可能会帮助你完成你想要的。

【解决方案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>

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

【讨论】：

我想你没有得到这个问题！我需要将明确的跨度放在各自的输入中，而不是提交按钮。