it-swarm.com.ru

сделать поле ввода текста HTML расти по мере ввода?

Я могу установить начальный размер ввода текста в CSS, например, так:

width: 50px;

Но я бы хотел, чтобы он рос, когда я набираю текст, пока он не достигнет, например, 200px . Можно ли сделать это прямо в CSS, HTML, желательно без JavaScript?

Размещайте свои решения js/jquery, конечно, но если это возможно без них - это будет здорово.

моя попытка здесь:

http://jsfiddle.net/jszjz/2/

61
Stann

Вот пример только с CSS и Content Editable

jsFiddle Пример

CSS

span 
{
    border: solid 1px black;
}
div 
{
    max-width: 200px;   
}

HTML

<div>
    <span contenteditable="true">sdfsd</span>
</div>
85
Joe

Я только что написал это для вас, надеюсь, вам понравится :) Нет гарантий, что это кросс-браузер, но я думаю, что это так :)

(function(){
    var min = 100, max = 300, pad_right = 5, input = document.getElementById('adjinput');

    input.style.width = min+'px';
    input.onkeypress = input.onkeydown = input.onkeyup = function(){
        var input = this;
        setTimeout(function(){
            var tmp = document.createElement('div');
            tmp.style.padding = '0';
            if(getComputedStyle)
                tmp.style.cssText = getComputedStyle(input, null).cssText;
            if(input.currentStyle)
                tmp.style.cssText = input.currentStyle.cssText;
            tmp.style.width = '';
            tmp.style.position = 'absolute';
            tmp.innerHTML = input.value.replace(/&/g, "&amp;")
                                       .replace(/</g, "&lt;")
                                       .replace(/>/g, "&gt;")
                                       .replace(/"/g, "&quot;")
                                       .replace(/'/g, "&#039;")
                                       .replace(/ /g, '&nbsp;');
            input.parentNode.appendChild(tmp);
            var width = tmp.clientWidth+pad_right+1;
            tmp.parentNode.removeChild(tmp);
            if(min <= width && width <= max)
                input.style.width = width+'px';
        }, 1);
    }
})();

JSFiddle

29
Paulpro

Как насчет программного изменения атрибута размера на входе?

Семантически (imo), это решение лучше, чем принятое решение, потому что оно все еще использует поля ввода для пользовательского ввода, но оно вводит немного jQuery. Soundcloud делает что-то похожее на эти теги.

<input size="1" />

$('input').on('keydown', function(evt) {
    var $this = $(this),
        size = parseInt($this.attr('size'), 10),
        isValidKey = (evt.which >= 65 && evt.which <= 90) || // a-zA-Z
                     (evt.which >= 48 && evt.which <= 57) || // 0-9
                     evt.which === 32;

    if ( evt.which === 8 && size > 0 ) {
        // backspace
        $this.attr('size', size - 1);
    } else if ( isValidKey ) {
        // all other keystrokes
        $this.attr('size', size + 1);
    }
});

http://jsfiddle.net/Vu9ZT/

6
muffs

От: Есть ли плагин jQuery autogrow для текстовых полей?


Посмотреть демо здесь: http://jsbin.com/ahaxe

Плагин:

(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,'&nbsp;').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);
3
cmpolis

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

<span contenteditable="true" 
      style="display: inline-block;
             border: solid 1px black;
             min-width: 50px; 
             max-width: 200px">
</span>

3
lastmjs

Несколько вещей приходят на ум: 

Используйте обработчик onkeydown в своем текстовом поле, измерьте текст * и соответственно увеличьте размер текстового поля.

Прикрепите класс :focus css к вашему текстовому полю большей ширины. Тогда ваша коробка будет больше, когда сфокусирована. Это не совсем то, что вы просите, но похоже.

* Это не просто измерить текст в JavaScript. Проверьте этот вопрос для некоторых идей. 

2
Seth

Здесь вы можете попробовать что-то вроде этого

Правка: ПЕРЕСМОТРЕННЫЙ ПРИМЕР (добавлено одно новое решение) http://jsfiddle.net/jszjz/10/

Объяснение кода

var jqThis = $('#adjinput'), //object of the input field in jQuery
    fontSize = parseInt( jqThis.css('font-size') ) / 2, //its font-size
    //its min Width (the box won't become smaller than this
    minWidth= parseInt( jqThis.css('min-width') ), 
    //its maxWidth (the box won't become bigger than this)
    maxWidth= parseInt( jqThis.css('max-width') );

jqThis.bind('keydown', function(e){ //on key down
   var newVal = (this.value.length * fontSize); //compute the new width

   if( newVal  > minWidth && newVal <= maxWidth ) //check to see if it is within Min and Max
       this.style.width = newVal + 'px'; //update the value.
});

и CSS довольно прост

#adjinput{
    max-width:200px !important;
    width:40px;
    min-width:40px;
    font-size:11px;
}

Правка: Другое решение состоит в том, чтобы пользователь печатал то, что он хочет, и на размытие (фокусировка), захватывал строку (с тем же размером шрифта), помещал ее в div - считал ширину div - и затем с анимацией Nice с крутым Эффект ослабления обновляет ширину полей ввода. Единственным недостатком является то, что поле ввода будет оставаться «маленьким», пока пользователь вводит. Или вы можете добавить тайм-аут:) вы также можете проверить такое решение на скрипке выше!

2
Pantelis

Я знаю, что это серьезно старая запись - , Но мой ответ может быть полезен для других, так что вот так .. Я обнаружил, что если мое определение стиля CSS для contenteditable div имеет минимальную высоту 200 вместо высота 200, то div автоматически масштабируется.

1
b0rgBart3

Конечно, какой подход вы используете, зависит от вашей конечной цели. Если вы хотите отправить результаты в форме, то использование собственных элементов формы означает, что вам не нужно использовать сценарии для отправки. Кроме того, если сценарии отключены, то резервный вариант все еще работает без причудливых эффектов увеличения-уменьшения. Если вы хотите получить простой текст из элемента contenteditable , вы всегда можете также использовать сценарии, такие как node.textContent , чтобы убрать HTML, который браузеры вставляют в пользовательский ввод.

Эта версия использует нативные элементы формы с небольшими уточнениями в некоторых предыдущих постах.

Это позволяет контенту сокращаться.

Используйте это в сочетании с CSS для лучшего контроля.

<html>

<textarea></textarea>
<br>
<input type="text">


<style>

textarea {
  width: 300px;
  min-height: 100px;
}

input {
  min-width: 300px;
}


<script>

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  var minWidth = parseInt(getComputedStyle(node).minWidth) || node.clientWidth;
  node.style.overflowX = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.width = minWidth + 'px';
    node.style.width = node.scrollWidth + 'px';
  };
});

Вы можете использовать что-то подобное с элементами <textarea>

document.querySelectorAll('textarea').forEach(function(node) {
  var minHeight = parseInt(getComputedStyle(node).minHeight) || node.clientHeight;
  node.style.overflowY = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.height = minHeight + 'px';
    node.style.height = node.scrollHeight + 'px';
  };
});

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

1
Kevin Douglas

Если вы просто заинтересованы в расширении, вы можете обновить width до scrollWidth, когда изменяется содержимое элемента input.

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  node.onchange = node.oninput = function() {
    node.style.width = node.scrollWidth+'px';
  };
});

Но это не уменьшит элемент.

0
ceving

Вот метод, который работал для меня. Когда вы вводите текст в поле, он помещает этот текст в скрытый интервал, затем получает новую ширину и применяет его к полю ввода. Он увеличивается и уменьшается с вашим вводом, с защитой от ввода, фактически исчезающей при удалении всего ввода. Проверено в Chrome. (РЕДАКТИРОВАТЬ: работает в Safari, Firefox и Edge на момент этого редактирования)

function travel_keyup(e)
{
    if (e.target.value.length == 0) return;
    var oSpan=document.querySelector('#menu-enter-travel span');
    oSpan.textContent=e.target.value;
    match_span(e.target, oSpan);
}
function travel_keydown(e)
{
    if (e.key.length == 1)
    {
        if (e.target.maxLength == e.target.value.length) return;
        var oSpan=document.querySelector('#menu-enter-travel span');
        oSpan.textContent=e.target.value + '' + e.key;
        match_span(e.target, oSpan);
    }
}
function match_span(oInput, oSpan)
{
    oInput.style.width=oSpan.getBoundingClientRect().width + 'px';
}

window.addEventListener('load', function()
{
    var oInput=document.querySelector('#menu-enter-travel input');
    oInput.addEventListener('keyup', travel_keyup);
    oInput.addEventListener('keydown', travel_keydown);

    match_span(oInput, document.querySelector('#menu-enter-travel span'));
});
#menu-enter-travel input
{
        width: 8px;
}
#menu-enter-travel span
{
        visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}
<div id="menu-enter-travel">
<input type="text" pattern="^[0-9]{1,4}$" maxlength="4">KM
<span>9</span>
</div>
0
Aaron Mason