CSS에서 maxlength를 지정할 수 있습니까?

85

maxlength 속성을 CSS의 다른 것으로 바꿀 수 있습니까?

<input type='text' id="phone_extension" maxlength="4" />

html css

— 브라이언 램지
소스

69

아니요.이 작업은 HTML에서 수행해야합니다. 필요한 경우 Javascript로 값을 설정할 수 있습니다.

— Edeverett
소스

126

아니.

maxlength는 동작을위한 것입니다.

CSS는 스타일링을위한 것입니다.

그게 이유입니다.

또한, CSS는 그것이 최대 길이 속성이 이해가되지 것입니다, 그래서 등 사업부 또는 IMG에 적용, 어떤 태그에 globaly 적용 할 수 있습니다

— 단 디플

5

그러나 maxlength 속성을 공통 입력 유형 집합 (예 : 이름, 도시, 주)에 적용하고 웹 사이트를 통해 다양한 위치에서 이러한 입력의 여러 인스턴스를 가질 수 있다면 어떻게 될까요? 클래스 (예 : 'FirstName')를 정의 할 수 있으면 좋을 것이며 모든 이름 입력에 해당 클래스를 적용합니다. <Input class = "FirstName">

— Catchops

@Catchops HTML의 한계이며 CSS를 사용하여이 문제를 해결하는 것은 추악한 해킹입니다. 이것이 대부분의 웹 프레임 워크가 사용자 지정 구성 요소가 포함 된 템플릿 시스템을 제공하는 이유입니다.

— 가브리엘

12

다음과 같이 jQuery를 사용할 수 있습니다.

$("input").attr("maxlength", 4)

다음은 데모입니다. http://jsfiddle.net/TmsXG/13/

— macio.Jun
소스

6

나는 당신이 할 수 있다고 생각하지 않으며 CSS는 페이지가 어떻게 보이는지 설명해야하므로 할 수 있다고해도 실제로 사용하는 방법이 아닙니다.

양식 구성 요소에 공통 기능을 적용하기 위해 JQuery를 사용하는 것에 대해 생각해야할까요?

— 백인
소스

4

CSS가 아닙니다.

— JMP
소스

3

CSS는 아니지만 JavaScript로 원하는 동작을 에뮬레이트하고 확장 / 사용자 정의 할 수 있습니다.

— code_burgar
소스

2

다른 사람들이 대답했듯이 CSS 클래스에 직접 maxlength를 추가하는 현재 방법은 없습니다.

그러나이 창의적인 솔루션은 원하는 것을 얻을 수 있습니다.

사이트에서 참조하는 maxLengths.js 파일에 jQuery가 있습니다 (ASP의 경우 site.master).

스 니펫을 실행하여 실제로 작동하는지 확인하십시오.

jquery, css, html :

$(function () {
    $(".maxLenAddress1").keypress(function (event) {

        if ($(this).val().length == 5) { /* obv 5 is too small for an address field, just want to use as an example though */
            return false;
        } else {
            return true;
        }

    });
});

.maxLenAddress1{} /* this is here mostly for intellisense usage, but can be altered if you like */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="text" class="maxLenAddress1" />

스 니펫 확장

이것을 사용하는 장점 : 이러한 유형의 필드에 대한 최대 길이를 밀어 내거나 전체 응용 프로그램에서 밀어 넣어야하는 경우 한 지점에서 변경할 수 있습니다. 고객 코드, 전체 이름 필드, 이메일 필드, 애플리케이션 전체에 공통되는 모든 필드와 같은 필드 길이에 편리합니다.

— 테일러 브라운
소스

1

이 코드는 여러 필드 유형에 대해 복사 및 붙여 넣기가 매우 쉽습니다. "maxLengths.js"라는 별도의 jQuery 파일을 유지하고 사이트 마스터에 포함합니다. 그것을 시도, 그것은 매우 편리합니다!

— Taylor Brown

HTML 클래스를 사용한다고해서 CSS가 아닙니다.

— nyuszika7h

@ nyuszika7h 제 답변에 대해 감사드립니다. 나는 요소에 스타일을 적용하지 않는 동안 내 솔루션에서 계단식 스타일 시트를 사용하고 있으므로 CSS가 활용되고 있다고 주장합니다. 또한 귀하의 관찰을 반영하기 위해 답변을 업데이트했습니다.

— Taylor Brown

1

사용 $("input").attr("maxlength", 4) 당신은 jQuery를 버전 <1.6을 사용하는 경우 $("input").prop("maxLength", 4) 당신이 jQuery를 버전을 사용하는 경우 1.6.

— Rohit
소스