Chrome 자동 형식 input = number

Chrome 자동 형식 input = number

---

HTML5 속성 type = "number"를 사용하여 입력 필드를 숫자로 지정하는 웹 응용 프로그램이 있습니다.

<input type="number" value="123456" />

유형을 지정하면 Chrome은 쉼표 (123,456)를 포함하도록 값의 형식을 자동으로 지정합니다. 다른 브라우저에서는 숫자 형식을 지정하지 않지만 숫자가 아닌 문자도 방지하지 않습니다.

이 경우 쉼표를 추가하고 싶지 않습니다. 현지화 된 서식을 해제하는 방법이 있습니까?

---

이것은 numberChromium 의 HTML5 입력 유형 과 관련된 동작으로 인해 발생하며, 이 문제를 신경 쓰지 않는 유일한 사람 은 아닙니다.

이전에 text유형 을 사용하여이 문제를 해결했습니다 . 예를 들어 이것은 잘 작동했습니다 (지금 Chrome 11.0.696.71에서 테스트 됨).

<input type="text" 
       placeholder="Enter Text" 
       name="inputName" 
       pattern="[0-9]*">

이 number유형의 동작 (적어도 나에게는)은 확실히 버그입니다. 왜냐하면 HTML5 표준number 은 표시 형식을 지정할 때 다음 값을 가져야한다고 지정 하기 때문입니다 .

숫자 입력이 주어지면 숫자를 문자열로 변환하는 알고리즘은 다음과 같습니다. 입력을 나타내는 유효한 부동 소수점 숫자를 반환합니다.

그리고 표준은 여기에 "유효한 부동 소수점"숫자를 정의하며 , 내가 볼 수있는 한 그룹화 문자를 포함하는 것은 예상되지 않습니다.

---

최신 정보

WebKit의 내장에서 문제를 다음 코드로 분리했습니다. 여기에 문제를 해결하는 줄도 포함했습니다.

// From LocalizedNumberICU.cpp
String formatLocalizedNumber(double number, unsigned fractionDigits)
{
    NumberFormat* formatter = numberFormatter();
    if (!formatter)
        return String();
    UnicodeString result;
    formatter->setMaximumFractionDigits(clampToInteger(fractionDigits));
    formatter->setGroupingUsed(FALSE); // added this line to fix the problem
    formatter->format(number, result);
    return String(result.getBuffer(), result.length());
}

다음 주에 휴가 중이지만 돌아 오면이 패치를 WebKit 팀에 제출할 계획입니다. 패치를 수락하면 Chromium은 정상적인 새로 고침 프로세스의 일부로 패치를 가져와야합니다.

---

여기 에서 원본 코드, 여기 에서 패치 된 개정판, 여기 에서 원본 파일과 패치 된 파일의 차이점을 볼 수 있습니다 . 최종 패치는 Shinya Kawanaka가 만들었습니다.

---

을 포함하여 확인할 수있는 몇 가지 추가 속성이 있습니다 valueAsNumber.

Chrome은 입력 유형에 따라 가능한 최상의 입력 방법을 제공하려고합니다. 이 경우 숫자에는 위아래로 전환하는 것과 같은 몇 가지 추가 기능도 있습니다.

요점은 숫자가 유효하지 않으면 오류가 있음을 감지하고 스타일을 설정할 수 있다는 것입니다. input[type=number]:invalid { background-color: red; }

---

시도해 볼 수 있습니다 ...

<input type="text" pattern="[0-9]*" value="123456" />

이것은 데스크탑과 아이폰의 파이어 폭스 4에서 0-9의 항목을 강제합니다. 사용해 볼 수있는 Chrome이 없지만 동일해야합니다.

---

숫자는 새로운 HTML5 입력 유형 중 하나입니다. 이메일, 날짜, 시간, URL 등 많은 것들이 있습니다.하지만 지금까지 Chrome에서만 구현 한 것 같습니다. 나머지는 기본 유형 (텍스트)을 사용합니다.

HTML5 입력 유형에 대한 자세한 정보 : http://diveintohtml5.ep.io/forms.html

Chrome에서 사용 중지하려면 텍스트로 남겨두고 사용자 기기가 핸드 헬드 인 경우 숫자로 변경할 수 있습니다. 사용자 장치 스니핑이 잘못된 결과를 제공하는 경우 사용성 킬러가 아니므로 문제가 없어야합니다.

---

이 비슷한 질문에 대한 내 대답을 참조하십시오 .

나는 <input type="tel" />현재이 함정을 피하기 위해 사용하는 것이 가장 논리적 이라고 생각 합니다. 다른 옵션은 흥미롭고 ( pattern속성 처럼 ) 나에게 약간 새로운 것이지만 내 디자인에 만족스럽지 않다는 것을 알았습니다. 얼마 전에 Hilton에서 작성한 모바일 애플리케이션의 스크린 샷을 여기에서 볼 수 있습니다 (실제로 내가 처음 참조한 답변에 표시됨).

---

이 시도:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $('[type=number]').attr('type', 'text').attr('pattern', '[0-9]*');
}

---

다음은 html 입력 태그의 "pattern"속성에 연결할 수있는 정규식의 전체 목록입니다. HTML5 패턴

다음은 소수점 이하 두 자리의 형식을 지정하기 위해 패턴을 사용하는 방법입니다.

<input type="number" pattern="\d+(\.\d{2})?" />

불행히도 iPad에서는 제대로 작동하지 않는 것 같습니다.

---

Why would you want to disable localized formatting? If you want a different format, just change the localization settings of your PC. Why would a user not be interested to show a number in his or her local format? This is definitely not a bug in Chrome but a feature!

It seems to me you are not really using a "number" as input but rather a "text" code with a pattern. See the other posts for suggestions to that.

참고URL : https://stackoverflow.com/questions/5345095/chrome-auto-formats-input-number