it-swarm-korea.com

일부 숫자 단위로 제한되는 숫자 입력을 나타내는 방법

필드 값을 고정 증분 50으로 제한하는 양식에 대한 요구 사항이 있으며 해당 제약 조건을 의미있는 방식으로 나타내는 가장 우아한 방법이 무엇인지 잘 모르겠습니다.

가장 간단한 해결책은 일반 텍스트 필드 입력에 연결된 일부 서버 측 로직과 결합 된 jQuery validate 메소드입니다. 염두에 두어야 할 다른 대안은 설정된 증분 또는 고정 된 수의 값을 가진 드롭 다운 목록으로 진행되는 일종의 숫자 선택기입니다 (현재는 모르겠습니다).

다른 아이디어가 있습니까? 가장 직관적 인 느낌은?

14
Nathan Taylor

Safari에서 HTML5 용으로 구현 된 방법을 사용하는 것이 좋습니다. 보다시피 here HTML5에는 새로운 속성을 가진 새로운 입력 유형이 있습니다. 이 경우 "step"이라는 속성이있는 입력 유형의 숫자를 사용합니다. 코드는 다음과 같습니다.

<input type="number" step="50" min="0" name="some_name" value="0" id="some_name" />

현재이 작업을 수행하는 브라우저는 많지 않습니다. 그러나 Safari에서 해당 코드를 보는 경우 (HTML5 doctype 사용) 필드 내부의 값을 "step"값만큼 증가시키는 위쪽/아래쪽 화살표를 제공하는 측면에 컨트롤이있는 일반 텍스트 입력 필드입니다. 당신이 할당했습니다.

따라서 UI 요소의 경우 아직 지원하지 않는 브라우저의 경우 입력 필드 옆에있는 위/아래 화살표를 복제합니다. 사용자에게 특정 값을 기대한다는 것을 알리기 위해 "50의 배수를 입력하십시오. 예 : 0, 50, 100, 150 등" 그런 다음 입력 한 숫자가 해당 범위 내에 있는지 확인하려면 클라이언트 측 또는 서버 측 코드가 필요합니다.

9
RussellUresti

슬라이더를 사용하십시오. 대부분의 UI 라이브러리는 슬라이더 컨트롤을 제공하며 일반적으로 50과 같은 '단계'를 정의하여 선택을 해당 값의 배수로 제한하는 옵션을 제공합니다.

HTML5를 사용하는 경우 입력 태그에는 "범위"유형 (단계 속성 포함)이 있으며 HTML5를 지원하는 대부분의 브라우저는 다음을 지원해야합니다. http://dev.w3.org/html5/markup/input. range.html

7
Rahul

목적은 무엇입니까?

회계/수학/숫자와 관련된 경우 승수를 제안합니다. "x 50"이 표시되고 합계가 표시됩니다. 논리 응용 프로그램의 경우 50 씩 증가하면 "50 씩 증가"를 사용하지 않는 이유는 무엇입니까?

4
Susan R

다른 사람들이 제안한대로 범위 슬라이더 사용하는 것이 가장 좋습니다. 또는 입력 상자에 Autocomplete 기능을 사용하여 사용자가 입력을 시작할 때 제안을 표시 할 수 있습니다. 다음은이 두 가지 방법에 대한 크로스 브라우저 예입니다.

슬라이더 : http://jqueryui.com/demos/slider/#range

자동 완성 : http://jqueryui.com/demos/autocomplete/

1

실제로 최소 및 최대 값에 따라 다릅니다.

가능한 값을 표시하기 위해 일반 선택 목록 만 사용했습니다. 또 다른 해결책은 간단한 방법으로 총계를 표시하여 사용자가 승수를 직접 입력 할 수는 있지만 여전히 결과를 볼 수 있다는 것입니다.

mockup

bmml 소스 다운로드Balsamiq Mockups

1
Nick P