Safari and Chrome: problem editing input 'size' attribute on the fly

Safari and Chrome: problem editing input 'size' attribute on the fly

眼眸里的那抹悲凉 发布于 2021-11-29 字数 917 浏览 766 回复 4 原文

I have the following bit of code to create an automatically resized text input:

// 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" />

Problem:
Resizing the input doesn't work in Safari or Chrome, just Firefox and Opera. I'm using jquery 1.3.2 and would like to know if it's a bug in jquery or my implementation.

EDIT: sorry I wasn't clear enough at first - it's the part where I'm trying to update the size of the input on the fly that is broken. My bad. Thanks for the feedback so far, some very useful links there.

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

策马西风 2022-06-07 4 楼

Safari nor Chrome doesn't respect some attributes. But you can set it via css element. Works good.

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

For example, i have noticed that onClick attribute doesn't work in Chrome when onclick is typed.

杀お生予夺 2022-06-07 3 楼

The problem seems to lie in setting the size attribute. This line:

$(this).attr("size",size);
忘你却要生生世世 2022-06-07 2 楼

According to the jQuery documentation on keydown():

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

Have you checked the page referenced to see if Safari/Chrome/Webkit have different values for the Enter key?

轻许诺言 2022-06-07 1 楼

I doubt that the size attribute would work cross browser. I would switch to setting the maxlength and css width of the input field rather than changing the size attribute.

Looks like a bug/unsupported feature in webkit. Which Safari/Chrome share.