使用 JavaScript 保持输入的焦点

keeping an input focused with javascript

本文关键字：焦点 输入 JavaScript 使用      更新时间：2023-09-26

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

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

试试this，这对你很有帮助。

.JS

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

使用.slide更改 css 名称input:focus

.CSS

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

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

$(document).ready(function () {
    $('#userIn').focus(function () {
        $(this).css({'min-width':200}); 
    });
});

为了简单起见，我正在使用jQuery，但如果需要，您可以不使用。这是更新的小提琴。

我只会像这样调整宽度

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

参考

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

相关文章：