在鼠標上輸入輸入字段展開

Question

我想在我輸入鼠標填充條目時展開輸入字段，或者在刪除鼠標時摺疊其原始寬度。

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

Answer 1

嗨，現在你可以嘗試focus和blur

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

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

Demo

Answer 2

你可以試試這個：

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

     }); 

DEMO

Answer 3

您可以使用jQuery的 '焦點' 的方法：

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

希望這有助於。

要調整的重點，並重點指出：

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

Answer 4

Codepenhttp://codepen.io/noobskie/pen/pjEdqv

你想找的懸停功能嗎？

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

編輯

更新codepen點擊擴展輸入至134％的鼠標離開事件返回到正常

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

Answer 5

要麼使用

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

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

    }); 

或

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

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

    }); 

Answer 6

試試這個：

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