Наведите указатель мыши на поле ввода Развернуть

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> 

Script

$('#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% на MouseLeave случае возвращается к нормальному

$("#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%'); 
    });