JQuery - автоматический ввод текста (не textarea!)

Ответ 1

Вот плагин, который будет делать то, что вам нужно:

Плагин:

(function($){

$.fn.autoGrowInput = function(o) {

    o = $.extend({
        maxWidth: 1000,
        minWidth: 0,
        comfortZone: 70
    }, o);

    this.filter('input:text').each(function(){

        var minWidth = o.minWidth || $(this).width(),
            val = '',
            input = $(this),
            testSubject = $('<tester/>').css({
                position: 'absolute',
                top: -9999,
                left: -9999,
                width: 'auto',
                fontSize: input.css('fontSize'),
                fontFamily: input.css('fontFamily'),
                fontWeight: input.css('fontWeight'),
                letterSpacing: input.css('letterSpacing'),
                whiteSpace: 'nowrap'
            }),
            check = function() {

                if (val === (val = input.val())) {return;}

                // Enter new content into testSubject
                var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                testSubject.html(escaped);

                // Calculate new width + whether to change
                var testerWidth = testSubject.width(),
                    newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                    currentWidth = input.width(),
                    isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                         || (newWidth > minWidth && newWidth < o.maxWidth);

                // Animate width
                if (isValidWidthChange) {
                    input.width(newWidth);
                }

            };

        testSubject.insertAfter(input);

        $(this).bind('keyup keydown blur update', check);

    });

    return this;

};

})(jQuery);

РЕДАКТИРОВАТЬ: Найдено на: Есть ли плагин joguery autogrow для текстовых полей?

Ответ 2

Я не думаю, что есть идеальное решение этой проблемы, потому что вы не можете определить фактическую ширину текста, введенного во входной элемент. Все зависит от шрифта, который вы используете, настроек масштабирования в браузере и т.д.

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

 $('input').keyup(function () {
     // I'm assuming that 1 letter will expand the input by 10 pixels
     var oneLetterWidth = 10;

     // I'm also assuming that input will resize when at least five characters
     // are typed
     var minCharacters = 5;
     var len = $(this).val().length;
     if (len > minCharacters) {
         // increase width
         $(this).width(len * oneLetterWidth);
     } else {
         // restore minimal width;
         $(this).width(50);
     }
 });

Ответ 3

( Отредактировано: с помощью метода .text() вместо .html(), чтобы все форматирование было правильным.)

Здравствуйте, я не знаю, если вы все еще ищете, но я столкнулся с этим, когда искал script, чтобы сделать то же самое. Поэтому надеюсь, что это поможет любому, кто пытается это сделать, или что-то подобное.

function editing_key_press(e){
    if(!e.which)editing_restore(this.parentNode);
    var text = $('<span>')
        .text($(this).val())
        .appendTo(this.parentNode);
    var w = text.innerWidth();
    text.remove();
    $(this).width(w+10);
}

Логика этого кода состоит в том, чтобы разместить содержимое на странице в промежутке, а затем получить ширину этого содержимого и удалить его. Проблема, с которой я столкнулся, заключалась в том, что я должен был заставить ее работать как с keydown, так и с клавиатурой, чтобы она успешно работала.

Надеюсь, что это поможет, возможно, не так, как я только делал jquery в течение короткого промежутка времени.

Спасибо

Джордж

Ответ 4

У меня есть плагин jQuery на GitHub: https://github.com/MartinF/jQuery.Autosize.Input

Он использует тот же подход, что и для ответа на вызов, но имеет некоторые изменения, упомянутые в комментариях.

Здесь вы можете увидеть живой пример: http://jsfiddle.net/mJMpw/6/

Пример:

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

Вы просто используете css для установки min/max-width и используете переход по ширине, если хотите приятный эффект.

Вы можете указать пробел/расстояние до конца как значение в нотации json для атрибута ввода-autosize-input на входном элементе.

Конечно, вы можете просто инициализировать его с помощью jQuery

$("selector").autosizeInput();

Ответ 5

Я использовал захватить ответ, но сделал следующие изменения:

• Между настройками isValidWidthChange и // Animate width:

  if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) {
      newWidth = o.maxWidth;
      isValidWidthChange = true;
  }
  

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

• После $(this).bind('keyup keydown blur update', check);:

  // Auto-size when page first loads
  check();
  

Ответ 6

Смотрите этот плагин jQuery: https://github.com/padolsey/jQuery.fn.autoResizeдел >

Я просто тестировал его с помощью текстовых полей, и это работает! Поддерживает автоматическое увеличение текстовых полей, ввод [тип = текст] и ввод [тип = пароль].

UPD. Похоже, что оригинальный автор удалил репо из github. Плагин не был обновлен в течение долгого времени и оказался довольно неудобным. Я могу предложить вам только лучшее решение. Я сделал запрос на загрузку этого плагина когда-то, поэтому я его копию в моей учетной записи github, используйте его только в том случае, если вы хотите улучшить его, он не пуленепробиваемый!

Кроме того, я обнаружил, что инфраструктура ExtJS имеет автоматическую реализацию для текстовых полей, см. свойство конфигурации расти. Хотя из этой структуры нелегко вырезать эту небольшую часть логики, она может дать вам несколько хороших идей в отношении подхода.

Ответ 7

По умолчанию ширина входного сигнала контролируется параметром size, который для type="text" соответствует числу символов, быть.

Поскольку это измеряется в символах, а не в пикселях, фактический размер пикселя контролируется используемым шрифтом (фиксированной ширины).

Ответ 8

Я просто думал об одном и том же. Текстовое поле должно изменить его самостоятельно, поскольку пользователь вставляет в него текст. Я никогда не использовал его, но у меня есть идея, как это сделать. Что-то вроде этого:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

  <table border="1">
  <tr>
    <td>
      <span id="mySpan">
        <span id="mySpan2"></span>
        <input id="myText" type="text" style="width:100%" onkeyup="var span = document.getElementById('mySpan2');var txt = document.getElementById('myText'); span.innerHTML=txt.value;">
       </span>
    </td>
    <td>
            sss
    </td>
  </tr>
</table>

  </body>
</html>

Ответ 9

Попробуйте этот код:

var newTextLength = Math.floor($("input#text).val() * .80);
$("input#text").attr("size",newTextLength);