динамически увеличивать тип ввода текстового поля в соответствии с введенными в него символами

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

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

Он должен начинать приращение ширины только в том случае, если число символов достигает конца текстового поля.

UPDATE:

Я ищу, чтобы сделать видимые все символы, введенными в поле, где по умолчанию шкуры прошлого текстового поля введенных символы влево.

FIDDLE DEMO

HTML

<input type="text" id="txtbox" />

SCRIPT

$('#txtbox').keypress(function() { 
    var txtWidth = $(this).width(); 
    var cs = $(this).val().length; 

    if(cs>17){ 
     $(this).width(txtWidth+5); 
    } 
});

источник

2013-12-22 Prasanth K C

Я пробовал этот код, и он отлично работает.

<html> 
<head> 
    <script type="text/javascript"> 
    function Expand(obj){ 
     if (!obj.savesize) obj.savesize=obj.size; 
     obj.size=Math.max(obj.savesize,obj.value.length); 
    } 
    </script> 
    </head> 
    <body> 
    <form> 
     <input type="text" size="5" style="font-family:Courier;" onkeyup="Expand(this);"> 
    </form> 
    </body> 
</html>

Обязательно используйте монопространственные шрифты в текстовом поле, в противном случае размер attr. и количество символов не будет соответствовать

источник

2013-12-22 09:53:33

<input type="text" id="txtbox" size="10"/> 

$('#txtbox').keypress(function() { 
     var txtWidth = $(this).attr('size'); 
     var cs = $(this).val().length-6; 
     txtWidth = parseInt(txtWidth); 
     if(cs>txtWidth){ 
      $(this).attr('size',txtWidth+5); } 
    });

Вы использовали поле ширины, которое на самом деле предназначено для type = image. Вы можете получить дополнительную информацию here. Я использовал атрибут размера, который используется для установки размера тега ввода в пикселях. Когда его 1 может по умолчанию принимать 6 символов, то -6. Надеюсь, поможет.

источник

2013-12-22 09:23:20 Rujul1993

смотрите мой обновленный вопрос –

решения, аналогичного @Tejas', но не требует шрифта быть моно-пространство:

Хитрость заключается в том, чтобы использовать scrollWidth, который дает нам полную строку длина, даже на одной линии без текстовых скроллинга: https://stackoverflow.com/a/9312727/1869660

Примечание: я не мог заставить это работать в IE, где scrollWidth всегда возвращенного 2 по какой-то причине ..

Часть кода:

function expand(textbox) { 
    if (!textbox.startW) { textbox.startW = textbox.offsetWidth; } 

    var style = textbox.style; 

    //Force complete recalculation of width 
    //in case characters are deleted and not added: 
    style.width = 0; 

    var desiredW = textbox.scrollWidth; 
    //Optional padding to reduce "jerkyness" when typing: 
    desiredW += textbox.offsetHeight; 

    style.width = Math.max(desiredW, textbox.startW) + 'px'; 
} 

... 

<input type="text" onkeyup="expand(this);" >

JSFiddle example

источник

2014-08-08 02:16:44 Sphinxxx

Более надежный (хотя и несколько более сложный) вариант, чтобы создать новый скрытый элемент, заполнить его с текстом входного, и измерить его ширина.[См. Здесь] (https://stackoverflow.com/questions/1582534/calculating-text-width). – Michael

динамически увеличивать тип ввода текстового поля в соответствии с введенными в него символами

ответ

Смежные вопросы