鼠标输入输入框展开答案

【问题标题】：On mouse enter input field Expand鼠标输入输入框展开
【发布时间】：2015-12-21 17:23:00
【问题描述】：

我想在输入鼠标时展开输入字段以填充条目，或者在移除鼠标时折叠其原始宽度。

我的 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

【问题讨论】：

标签： javascript html twitter-bootstrap css-transitions

【解决方案1】：

您可以使用 JQuery 的 'Focus' 方法：

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

希望这会有所帮助。

在焦点内调整大小，然后焦点外：

$('#service').on('focusin',function() {
    $('#service').css({'width': '134%'});
});
$('#service').on('focusout',function() {
     $('#service').css({'width': ''});
});

【讨论】：

什么都没有发生，它只会像我的代码一样增加宽度

【解决方案2】：

您好，现在您可以尝试 focus 和 blur

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

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

Demo

【讨论】：

在应用css时使用$(this)不会太多

【解决方案3】：

你可以试试这个：

$('#service').click(function() {
             $('#service').css({
             'width': '134%'
             });
     return:false;

        });

DEMO

【讨论】：

当我使用它时，它保持不变意味着输入字段中不会发生任何事件

【解决方案4】：

Codepen http://codepen.io/noobskie/pen/pjEdqv

您正在寻找悬停功能吗？

$( "#service" ).hover(
  function() {
    $( this ).css({'width': '134%'});
  }, function() {
    $( this ).css({'width': '100%'});
  }
);

编辑

在 mouseleave 事件恢复正常时，更新的 codepen 点击将输入扩展为 134%

$( "#service" ).click(
  function() {
    $( this ).css({'width': '134%'});
  }
);
$( "#service" ).mouseout(function() {
    $( this ).css({'width': '100%'});
});

【讨论】：

【解决方案5】：

试试这个：

$('#service')
  .on('focusin',function() {
    $(this).width('134%');
  })
  .on('focusout',function() {
     $(this).width('100%');
  });

【讨论】：

【解决方案6】：

任意使用

$('#service').on('blur',function() { 

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

    });

或

$('#service').on('mouseleave',function() {

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

    });

【讨论】：