[JQUERY] JQuery와 자동 증가 플러그인에 대한 텍스트 필드가 있습니까?
JQUERYJQuery와 자동 증가 플러그인에 대한 텍스트 필드가 있습니까?
해결법
-
1.여기 계신 다하겠습니다 플러그인입니다 :
여기 계신 다하겠습니다 플러그인입니다 :
편집 : 나는 마티아스 '의견에 따라 플러그인을 고정했습니다. :)
여기 데모를 참조하십시오 http://jsfiddle.net/rRHzY
플러그인 :
(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); -
2.내가 GitHub의에 jQuery 플러그인이 있습니다 https://github.com/MartinF/jQuery.Autosize.Input
내가 GitHub의에 jQuery 플러그인이 있습니다 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를 사용하면 좋은 효과를 원하는 경우 폭에 전환을 사용합니다.
사용자는 입력 요소의 데이터 autoSize의 입력 특성 JSON 표기법 값 끝에 공간 / 거리를 지정할 수있다.
물론 당신은 또한 단지 jQuery를 사용하여 초기화 할 수 있습니다
$("selector").autosizeInput(); -
3.플러그인 좋은, 감사합니다! 그래도 난 내 프로젝트에서 더 잘 작동하는 것 같았다 두 가지를 변경했습니다.
플러그인 좋은, 감사합니다! 그래도 난 내 프로젝트에서 더 잘 작동하는 것 같았다 두 가지를 변경했습니다.
도움이 되었기를 바랍니다.
-
4.바로 제임스의 위대한 플러그인에 작은 개선을 공유하고 싶었다. 텍스트 들여 쓰기에 대한 계정에 테스터 요소의 CSS 선언에이 코드를 추가합니다 :
바로 제임스의 위대한 플러그인에 작은 개선을 공유하고 싶었다. 텍스트 들여 쓰기에 대한 계정에 테스터 요소의 CSS 선언에이 코드를 추가합니다 :
textIndent: 0그게 없으면, 어떤 상황에서 테스터 요소는 실수 때문에 입력의 크기를 던지고, 다른 곳에서 텍스트 들여 쓰기를 상속 할 수 있습니다.
JP처럼, 나는 또한 예컨대 autoGrowInput 메서드 호출에 "트리거 ( '의 keyup')를"체인에 의해, 약간 다르게 불과했던 처음부터 올바른 크기로 입력 크기를 조정하고 싶었 :
$('#contact_form').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger('keyup');보조 노트로서, 나는 순전히 제임스의 솔루션에 대한 의견이 사이트에 가입하고 나는 조금 나는 시작하기에 충분한 명성 포인트가없는 수 없기 때문에 것을 발견하는 화가입니다. 죄송합니다 내가 뭔가를보고 싶었어,하지만 난이 더 적절 제임스의 솔루션보다는 오히려 주요 질문에 댓글을이다 게시 할 필요가 있음을 의미하는 것 같다합니다.
-
5.또한 대체 것
또한 대체 것
$(this).bind('keyup keydown blur update', check)...에
$(this).bind('keyup blur update', check).bind('keydown', function() { setTimeout(check); });현장을 얻기 위해이 브라우저에 의해 다시 렌더링 직후의 크기를 조정할. 그것은 몇 가지 채터에서 필드를 제거하는 것입니다.
-
6.나는이 동작을 재현 형 텍스트 입력을위한 플러그인을 만들 수 있습니다. 그것은 다른 독특한 기능을 가지고 있습니다. 당신은 예제를 보려면 플러그인의 설명서를 볼 수 있습니다. @ 제임스 대답은 입력에 큰 텍스트를 붙여 몇 가지 문제가있다. 이 문제를 해결하려면, 나는 그의 코드를 일부 수정을 만들었습니다. 다음은이 예를 들어 데모입니다.
나는이 동작을 재현 형 텍스트 입력을위한 플러그인을 만들 수 있습니다. 그것은 다른 독특한 기능을 가지고 있습니다. 당신은 예제를 보려면 플러그인의 설명서를 볼 수 있습니다. @ 제임스 대답은 입력에 큰 텍스트를 붙여 몇 가지 문제가있다. 이 문제를 해결하려면, 나는 그의 코드를 일부 수정을 만들었습니다. 다음은이 예를 들어 데모입니다.
(function($){ $.fn.autoGrowInput = function(o) { o = $.extend({ maxWidth: 200, minWidth: 1, comfortZone: 1, width: 1 }, o); this.filter('input:text').each(function(){ var minWidth = o.minWidth || $(this).width(), maxWidth = o.maxWidth, 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, currentWidth = input.width(); if (testerWidth < minWidth) { newWidth = minWidth; } else if (testerWidth > maxWidth) { newWidth = maxWidth; } input.width(newWidth + o.comfortZone); }; testSubject.insertAfter(input); $(this).bind('input', check); }); return this; }; })(jQuery); -
7.그 안에 문자열의 폭을지나 확장 할 때 텍스트 상자가 성장하려면이 같은 아마 무언가가 당신을 위해 일 것입니다 ... 그것은 텍스트 상자의 크기 속성을 감지합니다. 문자열의 길이는 그 속성을 통해가는 경우의 keyup에 문자열의 길이에 텍스트 상자를 확장합니다.
그 안에 문자열의 폭을지나 확장 할 때 텍스트 상자가 성장하려면이 같은 아마 무언가가 당신을 위해 일 것입니다 ... 그것은 텍스트 상자의 크기 속성을 감지합니다. 문자열의 길이는 그 속성을 통해가는 경우의 keyup에 문자열의 길이에 텍스트 상자를 확장합니다.
아래의 스크립트에서 "#test는"텍스트 상자 ID입니다.
<script language="javascript" type="text/javascript"> $(document).ready(function(){ $("#test").keyup(function(){ if($("#test").attr("size") < $("#test").val().length){ size = $("#test").val().length; $("#test").attr("size",size); } }) }); </script> -
8.IE 오버 플로우 재미 충분히 : 볼은 매우 심각합니다. 당신의 입력 요소에 볼 수 : 당신은 오버 플로우 적용하여 이러한 효과를 달성 할 수있다. 확실하지 유사한 CSS 트릭이 현대적인 브라우저에 존재하는 경우.
IE 오버 플로우 재미 충분히 : 볼은 매우 심각합니다. 당신의 입력 요소에 볼 수 : 당신은 오버 플로우 적용하여 이러한 효과를 달성 할 수있다. 확실하지 유사한 CSS 트릭이 현대적인 브라우저에 존재하는 경우.
-
9.최고 플러그인 제임스! 감사. 나는 매우 효과적인 불구하고 JP에 의해 결국 체크 제안을 추가했다.
최고 플러그인 제임스! 감사. 나는 매우 효과적인 불구하고 JP에 의해 결국 체크 제안을 추가했다.
또한 나는 나의 부분에 약간의 변화를 추가했다. 내가 추가 변화된 폭이의 maxWidth를 초과하는 경우 최대 크기로 입력 크기를 설정하고 싶었 :
else if (widthexceeds){ input.width(o.maxWidth); }isValidWidthChange 대한 여부를 확인 아래 여기서 widthexceeds = newWidth> o.maxWidth
-
10.난 내 자신의 프로젝트를 위해이 문제를 해결하기 위해 플러그인이라고 입력 자동 증가를 만들었습니다. 이 플러그인은 원래 제임스 응답의 기반으로했지만 여러 가지 방법으로 향상되었습니다.
난 내 자신의 프로젝트를 위해이 문제를 해결하기 위해 플러그인이라고 입력 자동 증가를 만들었습니다. 이 플러그인은 원래 제임스 응답의 기반으로했지만 여러 가지 방법으로 향상되었습니다.
https://github.com/westonganger/input-autogrow
입력은 입력을 자동 증가 autogrowing위한 플러그이다. 가장 일반적으로 텍스트 영역의 태그를 대상으로하기 때문에이 플러그인은이 라이브러리 대신 입력 태그를 대상으로, 다른 사람과 다르다. $ .fn 플러그인을 지원하는 등의 jQuery를, Zepto, 또는 같은 DOM 라이브러리가 필요합니다.
다음은 몇 가지 사용 예입니다.
/* Makes elements readonly if they already have the readonly attribute */ $('input.autogrow').inputAutogrow(); /* Manually trigger update */ $('input.autogrow').trigger('autogrow'); /* or */ $('input.autogrow').trigger('change'); /* Custom Options */ $('input.autogrow').inputAutogrow({maxWidth: 500, minWidth: 25, trailingSpace: 10}); /* Remove autogrow from input */ $('input.autogrow').inputAutogrow('destroy');
from https://stackoverflow.com/questions/931207/is-there-a-jquery-autogrow-plugin-for-text-fields by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
| [JQUERY] 자바 스크립트로 jQuery 코드를 변환하는 쉬운 방법이 있나요? [닫은] (0) | 2020.10.24 |
|---|---|
| [JQUERY] jQuery를 아약스 기능의 데이터로 전체 양식에 합격 (0) | 2020.10.24 |
| [JQUERY] 어떻게 자바 스크립트 렌더링 된 HTML 페이지의 일부를 인쇄 할 수 있습니까? (0) | 2020.10.24 |
| [JQUERY] 어떻게 jQuery를 사용하여 CSS를 변경하려면? (0) | 2020.10.24 |
| [JQUERY] 어떻게 자바 스크립트를 사용하여 요소의 XPath는 위치를 계산하는? (0) | 2020.10.24 |