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

Question

Как автоматически изменить размер поля ввода = «текст» с помощью jQuery? Я хочу, чтобы это было как 100px в ширину с самого начала, а затем сделало его автоматическим расширением, поскольку пользователь вводит текст ... это возможно?

Answer 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); 

EDIT: Найдено по: Is there a jQuery autogrow plugin for text fields?

Answer 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); 
    } 
}); 

Answer 3

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

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

Answer 4

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

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

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); 
} 

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

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

Благодаря

Джордж

Answer 5

Я использовал seize's answer, но сделал эти изменения:

• Между установкой 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(); 
  

Answer 6

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

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

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

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

Answer 7

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

<!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> 

Answer 8

У меня есть плагин 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, чтобы установить мин/макс ширину и использовать переход по ширине, если вы хотите хороший эффект ,

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

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

$("selector").autosizeInput(); 

Answer 9

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

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