Question

我有一个场景，我使用css在焦点上扩展搜索框，当我专注于搜索框时，搜索框必须减少，取消按钮必须放在搜索框的旁边。

的CSS：

.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
 }

: content-box;
font-size: 100%;

.clrble .frmcntr:focus {
    width: 70%;
    text-align: left;
    background-color: #fff;
    border-color: #66CC75;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
    background-color:rgba(247, 247, 247, 1);
    background:url("images/search.png") no-repeat  10px center;
    padding-left:40px;
}

.clrble .frmcntr {
    -webkit-appearance: textfield;
    -webkit-box-sizing

}

这是我的plunker链接：

https://plnkr.co/edit/Z7mfglWEoDyjbDfFDbLM?p=preview

预期的输出将是这样的：

是否可以使用Angularjs或JavaScript？

Answer 1

可能的解决方案是绝对定位你想要的div。然后在输入焦点上，使div可见或将其滑入视图;

使用plunk，添加以下CSS：

.clrble{
  position: relative;
}
.frmcntr:focus + .btn{
  display: block;
}

.btn{display: none; position: absolute; right: 0;}

这是HTML：

<div class="clrble">
    <input type="text"  placeholder="Search" class="frmcntr">
    <div class="btn">button here</div>               
</div>

这并不完美，但我认为它会指向正确的方向。

Answer 2

您可以将blur事件用作输入，并将mousedown事件用作模糊事件之前的mousedown事件。

var mouseDown = false;

$('input').blur(function() {
    if(mouseDown) // cancel the blur event
    {
        $('input').focus();
        mouseDown = false;
    }

});


$('#cancelBtn').mousedown(function(){
  mouseDown = true;
  console.log('Button Clicked');
});

$('input').focus(function(){
  $('#cancelBtn').css('display', 'block');
});

$('input').focusout(function(){
  $('#cancelBtn').css('display', 'none');
});

/* Styles go here */

.clrble .frmcntr {
    background:url("images/search.png") no-repeat 110px center;
    text-align: center;
    border-radius: 4px;
    border: medium none;
    cursor: pointer;
    font-size: 20px;
	font-family:SFUIDisplay;
    padding: 6px 10px 6px 10px;
    transition: all 0.5s ease 0s;
    width: 95%;
	background-color:rgba(247, 247, 247, 1);
  float:left;
}

.clrble .frmcntr:focus {
    width: 70%;
	text-align: left;
    background-color: green;
    border-color: #66CC75;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
	background-color:rgba(247, 247, 247, 1);
	background:url("images/search.png") no-repeat  10px center;
	padding-left:40px;
}

.clrble .frmcntr {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-size: 100%;
}

#cancelBtn {
color:blue;
float:left;
font-weight:bold;
display:none;
padding:5px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
   <div class="clrble">
								<input type="text" placeholder="Search" class="frmcntr">
                  <div id="cancelBtn">Cancel</div>           
							</div>
  </body>

</html>

Answer 3

使用浮动属性，你可以管理并排位置。

为您的textbox类使用float:left; css属性，这将适合您的要求，按钮的位置也可以由css处理。

用于文本框的CSS

.clrble .frmcntr {
background:url("images/search.png") no-repeat 110px center;
text-align: center;
border-radius: 4px;
border: medium none;
cursor: pointer;
font-size: 20px;
font-family:SFUIDisplay;
padding: 6px 10px 6px 10px;
transition: all 0.5s ease 0s;
width: 95%;
background-color:rgba(247, 247, 247, 1);
float:left;

}

Answer 4

您可以隐藏并显示＆＃39;取消＆＃39;在它。

＆＃13;

/* Styles go here */

.clrble .frmcntr {
  background: url("images/search.png") no-repeat 110px center;
  text-align: center;
  border-radius: 4px;
  border: medium none;
  cursor: pointer;
  font-size: 20px;
  font-family: SFUIDisplay;
  padding: 6px 10px 6px 10px;
  transition: all 0.5s ease 0s;
  width: 95%;
  background-color: rgba(247, 247, 247, 1);
}

.clrble .frmcntr:focus {
  width: 70%;
  text-align: left;
  background-color: #fff;
  border-color: #66CC75;
  -webkit-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  -moz-box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  box-shadow: 0 0 5px rgba(109, 207, 246, .5);
  background-color: rgba(247, 247, 247, 1);
  background: url("images/search.png") no-repeat 10px center;
  padding-left: 40px;
}

.clrble .frmcntr {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  font-size: 100%;
}

.clrble {
  position: relative;
}

.frmcntr:focus+.btn {
  display: block;
}

.btn {
  display: none;
  position: absolute;
  right: 0;
}

.cancel {
  visibility: hidden;
  color: blue;
  font-family: sans-serif;
  font-size: 20px;
}

.frmcntr:focus + .cancel {
  visibility: visible;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <div class="clrble">
    <input type="text" placeholder="Search" class="frmcntr">
    <span class="cancel">Cancel</span>
    <span class="btn">button here</span>
  </div>
</body>

</html>

＆＃13;

如何在焦点旁边的输入框旁边放置一个div？

4 个答案: