javascript - javascript で集中的に入力を維持する

Question

フォーカスされていないときに縮小する入力ボックスがあります (ここでhttp://jsfiddle.net/5Lc5wを参照)。この結果、ユーザーが何かを送信すると、ボックスはすぐに縮小します。focus()動作しないように見えるものを試し、スタイル属性を変更しようとしましたが、もちろん、これは疑似クラスを変更しません (変更できません) 。

Javascriptを使用してこれを解決する方法はありますか?

Answer 1

試してみてくださいthis。これは役に立ちます。

JS

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

でcss名input:focus を変更.slide

CSS

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

Answer 2

min-width次のように、フォーカス イベントの後に CSS にa を追加するだけです。

$(document).ready(function () {

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

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

簡単にするためにjQueryを使用していますが、必要に応じてjQueryを使用しなくてもかまいません。これが更新されたfiddleです。