Safari 和 Chrome：动态编辑输入“大小”属性的问题答案

【问题标题】：Safari and Chrome: problem editing input 'size' attribute on the flySafari 和 Chrome：动态编辑输入“大小”属性的问题
【发布时间】：2009-04-27 17:35:28
【问题描述】：

我有以下代码来创建自动调整大小的文本输入：

// setup quick jump input
$("#goto").keydown(function(e){
  var size = $(this).val().length;

  // sanity
  if ( size < 1 ) {
    size = 1;
  }

  $(this).attr("size",size);

  // if enter then GOTO->
  if ( e.keyCode == 13 ) {
    window.location.href = "/" + $(this).val();
  }
});

HTML：

<input type="text" id="goto" size="1" name="goto" />

问题： 调整输入大小在 Safari 或 Chrome 中不起作用，仅在 Firefox 和 Opera 中起作用。我正在使用 jquery 1.3.2，想知道它是 jquery 还是我的实现中的错误。

编辑：对不起，我一开始还不够清楚 - 这是我试图即时更新输入大小的部分，它被破坏了。我的错。感谢您迄今为止的反馈，那里有一些非常有用的链接。

【问题讨论】：

标签： javascript jquery safari google-chrome

【解决方案1】：

我怀疑 size 属性是否可以跨浏览器工作。我会切换到设置输入字段的 maxlength 和 css 宽度，而不是更改 size 属性。

看起来像 webkit 中的错误/不受支持的功能。哪个 Safari/Chrome 共享。

【讨论】：

谢谢 - 我没想到只使用 CSS！

【解决方案2】：

根据keydown() 上的 jQuery 文档：

// Different browsers provide different codes
// see here for details: http://unixpapa.com/js/key.html    
// ...

您是否检查过the page referenced 以查看 Safari/Chrome/Webkit 的 Enter 键值是否不同？

【讨论】：

也许值得去看看quirksmode.org/js/keys.html他们解释了浏览器中关键事件的区别和缺点。根据我的链接，Enter 应该在所有浏览器中作为 keycode 13 工作。

【解决方案3】：

问题似乎在于设置 size 属性。这一行：

$(this).attr("size",size);

【讨论】：

我已经尝试确保 size 是一个字符串，但我无法弄清楚该行有什么问题。语法是正确的......我猜问题浏览器“保护”输入属性或类似的东西。最令人沮丧的。
是的，我尝试使用字符串和数字直接设置属性，有很多不同的方式。无论如何它都不会让步。

【解决方案4】：

Safari 和 Chrome 不尊重某些属性。但是您可以通过 css 元素设置它。效果很好。

$(this).css("width","4em");

例如，我注意到当键入 onclick 时，onClick 属性在 Chrome 中不起作用。

【讨论】：