Onload подходит размер ввода к длине текста

Question

Я пытаюсь, чтобы jQuery проверил длину текста в поле ввода onLoad и изменил размер поля ввода в соответствии с размером. Вот моя попытка кода:

$("#emailSubject").attr('size', this.val().length);

Я получаю следующую ошибку:

this.val не является функцией

Что я делаю не так?

Обновление: Теперь я больше не получаю первую ошибку, но длина отображается как 0, хотя это не должно быть. (Я использую предупреждение, чтобы проверить, какова длина). Почему это происходит?

Обновление: Вот контекст кода:

$(
        function()
        {
            //works correctly   
            alert($("#emailSubject").val().length);
            //throws error
            $("#emailSubject").attr('size', ($(this).val().length)); 
        }
    )

Новая ошибка - длина правильно отображается в предупреждении, но я получаю ошибку:

Индекс или размер отрицателен или превышает допустимую сумму.

Answer 1

Как сказал Alien Webguy , вы пытаетесь вызвать функцию jQuery (val) для , что, вероятно, является необработанным элементом DOM или объектом window (вы не показалидостаточно контекста, чтобы мы знали, что такое this, но ошибка говорит о том, что это не экземпляр jQuery) объект document (потому что именно это jQuery устанавливает для this при вызове обработчика ready). (Ваше обновление прояснило это.) Итак, первое, что нужно - получить правильную ссылку для поля и обернуть ее в экземпляре jQuery.

Но отдельно, если для size установлено значениеколичество символов, поле почти наверняка будет намного больше, чем вы хотите.Это связано с тем, что size работает с одинаковой шириной символов.

Вместо этого обычно измеряют фактическую строку, используя элемент вне страницы с тем же семейством шрифтов, стилем, размером, оформлением текста и т. Д.,и т.д. в качестве элемента ввода.Примерно так ( живая копия ):

CSS:

#theField, #measure {
  font-family: serif;
  font-size: 12pt;
  font-style: normal;
}
#measure {
  position: absolute;
  left: -10000px;
  top: 0px;
}

HTML:

<input type='text' id='theField' value=''>
<span id="measure"></span>

JavaScript:

jQuery(function($) {
  var field;

  // Hook up some events for resizing
  field = $("#theField");
  field.bind("change keypress click keydown", function() {
    resizeIt(field);
  });

  // Resize on load
  resizeIt(field);

  // Function to do the work
  function resizeIt(field) {
    var measure = $("#measure");
    measure.text(field.val());
    field.css("width", (measure.width() + 16) + "px");
  }
});

Обратите внимание, что там я изменяю размеры и для различных событий;Я сомневаюсь, что список там исчерпывающий, но он дает вам представление.

Answer 2

Вы использовали здесь $(this) в замешательстве, потому что мы не можем видеть, как остальной код вступает в игру.

Например:

$('body').bind('keypress',function(){
    $('#emailSubject').attr('size', $(this).val().length);
});

В приведенном выше коде $(this) относится к $('body'), и вам нужно будет сделать что-то вроде этого:

$('body').bind('keypress',function(){
    var _this = $('#emailSubject');
    _this.attr('size', _this.val().length);
});

Если, однако, ваш обработчик событий был связан с $('#emailSubject'), тогда $(this) сработает, и вы даже сможете использовать его дважды:

$("#emailSubject").bind('keypress',function(){
    $(this).attr('size', $(this).val().length);
});

Answer 3

Вам нужно окружить this объектом jQuery $(this)