отрегулируйте ширину ввода, соответствующую значению длины ввода

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

$(document).ready(function(){ 
 
    $('input').on('input',function(){ 
 
    $(this).css('width',$(this).width()+$(this).val().length); 
 
    }); 
 
});

input{border:1px solid red;width:30px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<input type="text">

источник

2016-11-06 Juliver Galleto

Ваш текущий код, безусловно, изменение ширины входа, но я понимаю, это не изменяя его, как вы хотели бы? Может быть, расскажите, как вы хотели бы этого? –

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

-1

Если ваша цель состоит в том, чтобы это было так же широко, как это необходимо, может быть буфером 30px, то проблема, вы добавления в ширину каждый раз, а не пересчитывая его с нуля. Это также помогло бы, если бы вы знали, насколько широким может быть персонаж, поэтому, вероятно, лучше всего установить размер шрифта или даже использовать другой скрытый элемент для измерения того, насколько широко представлен выделенный текст; здесь я использую span для этого:

$(document).ready(function(){ 
 
    $('input').on('input',function(){ 
 
    var $this = $(this); 
 
    // Get the value 
 
    var val = $this.val(); 
 
    
 
    // Put it in the hidden span using the same font information 
 
    var $hidden = $(".hidden"); 
 
    $hidden.text(val); 
 
    
 
    // Set the input to the span's width plus a buffer 
 
    $this.css('width', $hidden.width() + 30); 
 
    }); 
 
});

input { 
 
    border:1px solid red; 
 
    font-size: 14px; 
 
    width:30px; 
 
} 
 
.hidden { 
 
    font-size: 14px; 
 
    display: none; 
 
}

<input type="text"> 
 
<span class="hidden"></span> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

источник

2016-11-06 10:46:29

... и это было бы «не полезно», как именно? –

Я предлагаю использовать contenteditable-span в этом случае, я надеюсь, что это помогает.

#test{border:1px solid red;width:30px;}

<span id="test" contenteditable>I'm trying to make an auto resize like input</span>

источник

2016-11-06 10:54:44

Мне нравится эта идея. –

Мне нравится идея, но по мере того как мое требование, я предпочитаю вход не span. –

отрегулируйте ширину ввода, соответствующую значению длины ввода

ответ

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