도움이 되지 않는 HTML

일관되고 깨끗하며 전문적인 스핀박스를 만드는 것이 HTML에서 간단한 작업이라고 생각할 수도 있습니다... 하지만 안타깝게도 입력에 정수 또는 소수 값만 허용해야 한다고 알려주는 표준 속성이 없습니다. , 모든 입력 필터링은 JS여야 합니다. 아웃!

저는 Go, a-h/Templ, Tailwind 및 제가 사랑하는 Alpine.js를 사용하여 이 기능을 구현하여 삶을 편하게 만들 예정입니다.

뼈대 추가하기

정수 스핀박스에 대한 기본 템플릿을 작성하는 것부터 시작합니다.

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  ...
}

IntInterval을 다음과 같이 정의합니다.

type IntInterval struct {
  A, B int
}

간격을 사용하여 입력의 최소값과 최대값을 설정합니다. 정수 스핀박스를 만들 때 단계는 항상 '1'로 설정됩니다.

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

CSS 추가

이제 두 개의 클래스를 추가해 보겠습니다. 다음은 입력 렌더링을 제어하는 ​​몇 가지 특수 속성과 의사 요소입니다.
select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]

다음 추가 클래스는 기본 스피너 버튼을 제거하는 데 사용됩니다.
[&::-webkit-inner-spin-button]:[-webkit-appearance:none] [&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance: 텍스트 필드]

마지막으로 기본 패딩, 링, 색상 등을 추가해 보겠습니다.
블록 w-전체 반올림-l-md py-2 px-2.5 텍스트-회색-900 링-1 링 삽입 링-회색-300 자리 표시자:텍스트-회색-400 포커스:개요-없음 포커스:링-2 포커스: ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6

템플릿에 추가하면 다음과 같은 결과가 나타납니다.

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  
}

이제 입력 위에 마우스를 올리면 기본적인 유효성 검사가 포함된 텍스트와 유사한 입력을 받게 됩니다. 다음 섹션에서는 유효한 정수 입력을 확인하는 기능을 추가하겠습니다.

필터 구현

정수 스핀박스의 기본 아이디어는 만 정수를 허용하는 입력입니다. 처음에는 다음과 같이 HTML의 패턴 속성을 사용하여 이 기능을 구현하려고 시도했습니다.

패턴 속성은 정규식 문자열을 가져와 이를 사용하여 사용자 입력의 유효성을 검사하지만 처음부터 잘못된 입력이 입력되는 것을 방지하지는 않습니다. 실제로 이는 간단한 클라이언트측 검증을 위해 만들어졌습니다.

'oninput' 이벤트

사용자가 입력 상자 안의 아무 키나 누를 때마다 oninput 이벤트가 생성됩니다. Alpine의 구문 x-on:input을 사용하여 이 이벤트를 캡처하고 입력 요소에 따라 값을 수정합니다. x-데이터 속성이 설정된 상위 div를 만들고 입력이 숫자인지 확인할 수 있는 함수를 추가해 보겠습니다. 그런 다음 그에 따라 값을 반올림할 수 있습니다.

Alpine을 모르는 분들을 위해 여기서 $el은 현재 DOM 요소를 참조하는 데 사용됩니다.

맞춤형 스피너

이전에 생성된 상위 div에서 다음 class="flex"를 추가하고 x-ref="spinbox" 속성을 입력에 추가하여 버튼이 $refs.spinbox 마법 속성을 통해 상태를 수정할 수 있도록 합니다.

그런 다음 입력 뒤에 새 하위 항목을 추가합니다. 여기에는 버튼이 포함됩니다.

여기에서는 탭 순서를 올바르게 유지하는 쉬운 방법으로 flex-col-reverse를 사용합니다. 먼저 '-'로 탭한 다음 ''으로 탭해야 합니다.

그런 다음 x-on:click을 사용하여 버튼에 이벤트 핸들러를 추가합니다. 전체 코드(CSS 제외)는 다음과 같습니다.

e.value와 e.step은 문자열이므로 연산을 수행하기 전에 변환해야 합니다.

스피너 버튼용 CSS의 경우 입력과 매우 유사하게 스타일이 지정되며 전체 코드는 아래에 있습니다.

최종 템플릿

templ IntSpinbox(이름, 레이블, 값, 도구 설명 문자열, saveinput bool, 간격 *IntInterval) { }

즐기다 :)

에서 작동

Mozilla Firefox 130.0(64비트)
버전 128.0.6613.120(공식 빌드)(64비트)