在鼠标上输入输入字段展开

时间:2015-09-24 07:29:37

标签: javascript html twitter-bootstrap css-transitions

当我输入鼠标来填充条目或者在移除鼠标时折叠其原始宽度时,我想扩展输入字段。

我的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%'
         });
});

JsFiddle

6 个答案:

答案 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;

        });

DEMO

答案 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)

您好现在可以尝试 focus blur

$( "#service" ).focus(function() {
  $('#service').css({ 'width': '134%' });
});

$( "#service" ).blur(function() {
  $('#service').css({ 'width': '100%' });
});

Demo

答案 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%'
         });

    });