<datalist>에서 사용자 입력을 사용 중지 할 수 있습니까?

Question

<select> 또는 <datalist>을 사용하여 사용자가 항목을 선택할 수있는 드롭 다운 목록을 표시하는 것에 대해 논쟁 중입니다.

<select> 태그의 단점은 다른 브라우저에서 다르게 렌더링되므로 스크롤 막대와 함께 표시되는 일부 브라우저와 일부는 드롭 다운 목록에 일치하지 않는다는 것입니다.

반면에 <datalist>은 좋지만 사용자가 아래쪽 화살표 버튼을 클릭하지 않으면 텍스트 상자에 원하는 내용을 입력 할 수있는 텍스트 입력을 사용하지 않도록 설정하는 방법이 있는지 알고 싶습니다. 입력 필드에 같은 표시 : 드롭 다운 목록을 유지하면서

​<form action="demo_form.asp" method="get"> 
 
    <input list="browsers" name="browser"> 
 
    <datalist id="browsers"> 
 
    <option value="Internet Explorer"> 
 
    <option value="Firefox"> 
 
    <option value="Chrome"> 
 
    <option value="Opera"> 
 
    <option value="Safari"> 
 
    </datalist> 
 
    <input type="submit"> 
 
</form>

입력 창을 사용하지 않도록 어떻게든지이 있습니까? 'readonly'속성을 시도했지만 클릭 할 수없는 전체를 렌더링합니다.

Answer 1

당신은 허용되는 값 제한하기 위해 input 요소에 the pattern attribute을 사용할 수

​<form action="demo_form.asp" method="get"> 
    <input list="browsers" name="browser" 
    pattern="Internet Explorer|Firefox|Chrome|Opera|Safari" 
    title='Must be "Internet Explorer", "Firefox", "Chrome", "Opera", or "Safari"'> 
    <datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
    </datalist> 
    <input type="submit"> 
</form> 

을