javascript - Safari and Chrome: problem editing input 'size' attribute on the fly - Stack Overflow

admin管理员组

文章数量:1405378

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.

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.

• javascript
• jquery
• safari
• google-chrome

Share Improve this question Follow edited Apr 27, 2009 at 19:20 roborourke asked Apr 27, 2009 at 17:35 roborourkeroborourke 12.2k44 gold badges2929 silver badges3737 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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.

According to the jQuery documentation on keydown():

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

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

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

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

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.

本文标签： javascriptSafari and Chrome problem editing input 39size39 attribute on the flyStack Overflow