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

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

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

        });

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

---

您可以使用JQuery的“聚焦”方法：

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

希望这有帮助

要在聚焦时调整大小，请执行以下操作：

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

Codepen

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

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

你在寻找悬停功能，对吗

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

编辑

更新的代码打开单击将输入扩展到134%，鼠标移动事件将恢复正常

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

任用

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

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

    });

或

---

您好，现在您可以尝试和

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

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

试试这个：

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

        });

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

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

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

---

什么都没有发生它只是增加了我的代码的宽度当我使用它时它保持不变意味着在输入字段中没有发生事件使用$（this）在应用css时不会太多