如何将焦点放在输入框旁边的div上？

我有一个场景，我用CSS扩展焦点搜索框，当我专注于搜索框然后搜索框必须减少，取消按钮必须放置在搜索框旁边。如何将焦点放在输入框旁边的div上？

的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或JavaS CRIPT？

来源

2017-07-06 anub

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

使用您的普拉克，添加以下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>

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

来源

2017-07-06 12:33:54 lehel

@ehel感谢您的帮助，这里是按钮后放置问题DIV不在同一个DIV，所以如何给悬停bootsrap CSS类。 – anub

它是在同一div（.frmcntr） - 只需要给按钮，你想给它自举类（不只是悬停，但总是）：''

button here

– lehel

可以使用blur事件输入和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; 
 
\t font-family:SFUIDisplay; 
 
    padding: 6px 10px 6px 10px; 
 
    transition: all 0.5s ease 0s; 
 
    width: 95%; 
 
\t background-color:rgba(247, 247, 247, 1); 
 
    float:left; 
 
} 
 

 
.clrble .frmcntr:focus { 
 
    width: 70%; 
 
\t 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); 
 
\t background-color:rgba(247, 247, 247, 1); 
 
\t background:url("images/search.png") no-repeat 10px center; 
 
\t 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"> 
 
\t \t \t \t \t \t \t \t <input type="text" placeholder="Search" class="frmcntr"> 
 
        <div id="cancelBtn">Cancel</div>   
 
\t \t \t \t \t \t \t </div> 
 
    </body> 
 

 
</html>

来源

2017-07-06 12:39:42 Raj

但我需要在同一div旁边显示搜索框不低于.. – anub

我更新了我的代码，以显示它除了使用浮动框：离开了。请检查现在 – Raj

嘿谢谢你它适合我，但面临小问题。 – anub

与float属性可以通过侧位置疥癣的一侧。

使用float:left; CSS属性为您TextBox类并会为您的要求工作，按钮的位置，也可以通过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;

}

来源

2017-07-06 12:45:50 Amit

你可以只隐藏和显示与它 '取消' 的跨度。

/* 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; 
 
}

<!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>

来源

2017-07-06 12:51:35 sol

但问题是，我需要将搜索框设置为其原始位置点击取消，但现在当我离开焦点时，它将设置为实际位置 – anub

@bpbsr对不起，我不确定你的意思按'实际位置'？当我单击焦点时，所有内容都会返回... – sol

但我需要使用取消按钮进行处理 – anub

如何将焦点放在输入框旁边的div上？

回答

相关问题