Question

我有一个输入框，当它不在焦点时收缩（如http://jsfiddle.net/5Lc5w所示）。因此，当用户提交某些内容时，该框立即缩小。我试过focus()似乎不起作用，我尝试改变样式属性，但当然这不会（不能）改变伪类。

有没有办法用Javascript解决这个问题？

Answer 1

只需在焦点事件后向CSS添加min-width，如下所示：

$(document).ready(function () {

    $('#userIn').focus(function () {

        $(this).css({'min-width':200}); 
    });
});

我使用jQuery是为了简单，但如果你需要，你可以不用。这是更新后的fiddle。

Answer 2

我会调整宽度，就像这样

document.getElementById('userIn').style.width = '160px';

Reference

你没有发布为什么你希望它放大，所以这就是我所能建议的。

Answer 3

试试this，这对您有所帮助。

JS

   $('#userIn').keyup(function(){
   if($(this).val()!='')
        $(this).addClass('slide');
   else
        $(this).removeClass('slide');        
   });

使用input:focus

更改css名称.slide

CSS

.slide
{
   border: 1px solid blue;
   transition:.3s;
  -webkit-transition:.3s;
   width:160px;
}

保持输入集中于javascript

3 个答案: