当我输入鼠标来填充条目或者在移除鼠标时折叠其原始宽度时,我想扩展输入字段。
我的Html代码
<div class="col-xs-4">
<input type="text" class="form-control" placeholder="All India" >
</div>
<div class="col-xs-6">
<input type="text" id="service" class="form-control" placeholder="What Service Do You Need Today ?">
</div>
脚本
$('#service').click(function() {
$('#service').css({
'width': '134%'
});
});
答案 0 :(得分:2)
你可以使用JQuery&#39; Focus&#39;方法:
$('#service').on('focus',function() {
$('#service').css({'width': '134%'});
});
希望这有帮助。
要在焦点上调整大小,然后重点关注:
$('#service').on('focusin',function() {
$('#service').css({'width': '134%'});
});
$('#service').on('focusout',function() {
$('#service').css({'width': ''});
});
答案 1 :(得分:1)
你可以尝试这个:
$('#service').click(function() {
$('#service').css({
'width': '134%'
});
return:false;
});
答案 2 :(得分:1)
Codepen http://codepen.io/noobskie/pen/pjEdqv
您正在寻找悬停功能吗?
$( "#service" ).hover(
function() {
$( this ).css({'width': '134%'});
}, function() {
$( this ).css({'width': '100%'});
}
);
修改强>
更新后的codepen click会在mouseleave事件返回正常时将输入扩展为134%
$( "#service" ).click(
function() {
$( this ).css({'width': '134%'});
}
);
$( "#service" ).mouseout(function() {
$( this ).css({'width': '100%'});
});
答案 3 :(得分:1)
$( "#service" ).focus(function() {
$('#service').css({ 'width': '134%' });
});
$( "#service" ).blur(function() {
$('#service').css({ 'width': '100%' });
});
答案 4 :(得分:1)
试试这个:
$('#service')
.on('focusin',function() {
$(this).width('134%');
})
.on('focusout',function() {
$(this).width('100%');
});
答案 5 :(得分:0)
使用
$('#service').on('blur',function() {
$('#service').css({
'width': '100%'
});
});
或
$('#service').on('mouseleave',function() {
$('#service').css({
'width': '100%'
});
});