입력할 때 HTML 텍스트 입력 필드를 증가시키시겠습니까?
다음과 같이 초기 텍스트 입력 크기를 CSS로 설정할 수 있습니다.
width: 50px;
하지만 예를 들어 200px에 도달할 때까지 타자를 칠 때 성장하고 싶습니다.이것은 javascript 없이 straight css, html로 할 수 있습니까?
물론 당신의 js/jquery 솔루션도 게시하십시오. 하지만 이것이 그것들 없이도 가능하다면 좋습니다.
제가 해보겠습니다.
다음은 CSS와 내용물 Editable만 있는 예제입니다.
CSS
span
{
border: solid 1px black;
}
div
{
max-width: 200px;
}
HTML
<div>
<span contenteditable="true">sdfsd</span>
</div>
『 』 『 』 『 』 참고 contenteditable
요소 만들기 파일 만들기contenteditable사용자는 복사된 HTML 요소를 이 요소 내부에 붙여넣을 수 있습니다.이는 사용 사례에 적합하지 않을 수 있으므로 사용을 선택할 때 참고하십시오.
그냥 써드린거에요, 마음에 드셨으면 좋겠네요 :) 크로스 브라우저라는 보장은 없지만 그렇다고 생각합니다 :)
(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, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'")
.replace(/ /g, ' ');
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);
}
})();
표시할 범위를 설정하면 인라인 블록, 자동 수평 및 수직 크기 조정이 매우 잘 작동합니다.
<span contenteditable="true"
style="display: inline-block;
border: solid 1px black;
min-width: 50px;
max-width: 200px">
</span>입력의 크기 속성을 프로그래밍 방식으로 수정하는 것은 어떻습니까?
의미론적으로 (imo) 이 솔루션은 여전히 사용자 입력에 입력 필드를 사용하지만 약간의 jQuery를 도입하기 때문에 허용된 솔루션보다 더 좋습니다.사운드 클라우드는 태그 지정을 위해 이와 유사한 작업을 수행합니다.
<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);
}
});
몇 가지 사항이 떠오릅니다.
용사를 합니다.onkeydown텍스트 필드에서 처리기를 사용하여 텍스트*를 측정하고 텍스트 상자 크기를 적절하게 늘립니다.
부첨a를 합니다.:focus더 큰 너비의 텍스트 상자에 대한 css 클래스.그러면 초점을 맞출 때 상자가 더 커질 것입니다.그게 정확히 당신이 요구하는 것은 아니지만, 비슷한 것입니다.
자바스크립트로 텍스트를 측정하는 것은 쉽지 않습니다.몇 가지 아이디어를 보려면 이 질문을 확인하십시오.
보낸 사람: 텍스트 필드에 대한 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, '&').replace(/\s/g,' ').replace(/</g, '<').replace(/>/g, '>');
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);
여기서 당신은 이런 것을 시도할 수 있습니다.
편집: 개정된 예제(새로운 솔루션 하나 추가) 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;
}
편집: 다른 해결책은 사용자가 원하는 것을 입력하고 블러(초점)에서 문자열(동일한 글꼴 크기)을 디브에 놓고 디브의 너비를 세고 쿨한 완화 효과가 있는 멋진 애니메이션으로 입력 필드 너비를 업데이트하는 것입니다.유일한 단점은 사용자가 입력하는 동안 입력 필드가 "작은" 상태로 유지된다는 것입니다.또는 타임아웃을 추가할 수 있습니다 :) 위의 바이올린에서도 그런 종류의 솔루션을 확인할 수 있습니다!
저는 이것이 심각하게 오래된 게시물이라는 것을 알고 있습니다 - 하지만 제 대답은 어쨌든 다른 사람들에게 유용할 수도 있습니다, 그래서 여기 있습니다.저는 contentedable div에 대한 제 CSS 스타일 정의가 높이가 200이 아닌 최소 높이가 200이면 div가 자동으로 확장된다는 것을 발견했습니다.
만약 당신이 단지 성장에 관심이 있다면, 당신은 업데이트할 수 있습니다.widthscrollWidth의 이 있을 input 변경요소 변경
document.querySelectorAll('input[type="text"]').forEach(function(node) {
node.onchange = node.oninput = function() {
node.style.width = node.scrollWidth+'px';
};
});
하지만 이것은 요소를 축소하지는 않습니다.
물론 어떤 접근 방식을 사용하느냐는 최종 목표가 무엇인지에 따라 달라집니다.양식과 함께 결과를 제출하려는 경우 기본 양식 요소를 사용하면 스크립팅을 사용하여 제출할 필요가 없습니다.또한 스크립팅이 해제된 경우에도 확장 축소 효과 없이 폴백이 여전히 작동합니다.내용 편집 가능한 요소에서 일반 텍스트를 가져오려면 항상 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';
};
});
<텍스트 영역> 요소와 유사한 것을 사용할 수 있습니다.
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에서는 깜박이지 않으며, 다른 브라우저에서는 결과가 다를 수 있으므로 테스트하십시오.
하면 수있다니습할사용다로 할 수 .display: inline-grid:
const dummy = document.querySelector(".dummy");
const input = document.querySelector("input");
const update = () => dummy.innerText = input.value;
input.oninput = update;
update();.growing-input {
display: inline-grid;
}
.growing-input .dummy,
.growing-input input {
grid-area: 1 / 1;
/* Following properties just need to be consistent,
to ensure the .dummy and the input take up the same space */
font: inherit;
padding: 0 0.25em;
margin: 0;
border: 1px solid grey;
border-radius: 2px;
}
.growing-input .dummy {
visibility: hidden;
white-space: pre-wrap;
}Here's an
<span class="growing-input">
<input type="text" value="auto-resizing input" size="1" />
<span class="dummy"></span>
</span>; have fun!이 아이디어는 동일한 내용을 포함하는 더미 요소를 만드는 것입니다.input그런 다음 설정합니다.input더미 요소의 너비와 일치하는 너비.하고, 위서우리자를사트텍동용기고스하화를트여하에립는,display: inline-grid함정에 빠뜨리기 위한 속임수input일치할 너비입니다.
(이 접근 방식은 이 기사에서 가져온 것입니다. 기본적인 내용으로 요약했습니다.)
여기 저에게 효과가 있었던 방법이 있습니다.필드에 입력하면 텍스트를 숨겨진 범위에 넣은 다음 새 너비를 가져와 입력 필드에 적용합니다.입력 내용에 따라 증가 및 축소되며, 모든 입력 내용을 지우면 입력에 대한 보호 기능이 사실상 사라집니다.Chrome에서 테스트됨. (EDIT: 이 편집 당시에는 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>만약 당신이 ch 측정(일간격)을 사용할 수 있다면, 그것은 제가 하려고 했던 것을 완전히 해결했습니다.
onChange(e => {
e.target.style.width = `${e.target.length}ch`;
})
이것이 바로 제가 필요로 하는 것이었지만 동적 너비 글꼴 패밀리에 적합한지는 잘 모르겠습니다.
입력 또는 텍스트 영역에서 작동하는 솔루션을 엄격하게 찾는 사람들에게 이것은 제가 본 솔루션 중 가장 간단한 것입니다.CSS 몇 줄과 JS 한 줄만.
JavaScript는 요소의 data-* 특성을 입력 값과 동일하게 설정합니다.입력은 CSS 그리드 내에서 설정되며, 여기서 그리드는 해당 데이터* 속성을 콘텐츠로 사용하는 유사 요소입니다.그 내용은 입력 값을 기준으로 그리드를 적절한 크기로 확장하는 것입니다.
https://css-tricks.com/auto-growing-inputs-textareas 에는 라이브러리가 필요 없는 흥미로운 솔루션이 있었습니다. https://codepen.io/shshaw/pen/bGNJJBE
여기서 단순화: https://codepen.io/michaeldimmitt/pen/mdGXgjy 단순화를 위해:
- 콘텐츠 편집을 시작하는 데 두 개의 공간이 필요함
- 이를 통해 부모 요소는 자연스러운 패딩을 가진 입력으로 보상할 수 있습니다.
참고: 시작 너비를 지정하기 위해 size="20"을 추가하면 길이가 20자가 됩니다.
/* css */
.input-sizer {
display: inline-grid;
&::after {
content: attr(data-value) ' ';
visibility: hidden;
white-space: pre-wrap;
}
}
/* html */
<label class="input-sizer">
<input type="text" size="1"
onInput="this.parentNode.dataset.value = this.value"
placeholder="5"
>
</label>
당신이 해야 할 일은 당신이 입력할 때 증가할 입력 필드의 요소를 가져오고 CSS에서 입력의 너비를 auto로 설정하고 최소 너비를 50px로 설정하는 것입니다.
언급URL : https://stackoverflow.com/questions/7168727/make-html-text-input-field-grow-as-i-type
'source' 카테고리의 다른 글
| PowerShell 2.0: 원격 세션 중에 Windows 공유 액세스 (0) | 2023.08.26 |
|---|---|
| 오버플로 스크롤을 사용하여 차체 높이를 설정하는 방법 (0) | 2023.08.26 |
| 도커 - 이미지 운영 체제 "윈도우"를 이 플랫폼에서 사용할 수 없습니다. (0) | 2023.08.25 |
| Powershell load dll에 오류가 발생했습니다. Add-Type : 파일이나 어셈블리 'WebDriver.dll' 또는 해당 종속성 중 하나를 로드할 수 없습니다.작업이 지원되지 않습니다. (0) | 2023.08.25 |
| 다중 처리를 위해 공유 메모리에서 numpy 배열 사용 (0) | 2023.08.25 |