답변:
여기에 허용 된 답변은 정확하지만 약간의 정보를 추가하고 싶습니다. 부트 스트랩과 같은 라이브러리 / 프레임 워크를 사용하는 경우이를 위해 클래스가 내장 될 수 있습니다. 예를 들어 부트 스트랩은 text-right
클래스를 사용합니다 . 다음과 같이 사용하십시오.
<input type="text" class="text-right"/>
<input type="number" class="text-right"/>
참고로 이것은 위에 표시된 숫자와 같은 다른 입력 유형에서도 작동합니다.
부트 스트랩과 같은 멋진 프레임 워크를 사용하지 않으면이 도우미 클래스의 자체 버전을 만들 수 있습니다. 다른 답변과 비슷하지만 입력 클래스에 직접 추가하지 않으므로 사이트 또는 페이지의 모든 단일 입력에 적용되지는 않지만 이는 바람직한 동작이 아닙니다. 따라서 이것은 인라인 스타일링이 필요하지 않거나 모든 단일 입력 상자에 영향을 미치지 않고 물건을 올바르게 정렬하는 멋진 CSS 클래스를 만듭니다.
.text-right{
text-align: right;
}
이제이 클래스를 위의 입력과 동일하게 사용할 수 있습니다 class="text-right"
. 많은 키 입력을 저장하지는 않지만 코드를 깨끗하게 만듭니다.
텍스트가 포커스를 잃은 후 오른쪽에 맞추려면 방향 수정자를 사용하십시오. 초점을 잃은 후 텍스트의 오른쪽 부분이 표시됩니다. 예를 들어 파일 이름을 큰 경로로 표시하려는 경우 유용합니다.
input.rightAligned {
direction:ltr;
overflow:hidden;
}
input.rightAligned:not(:focus) {
direction:rtl;
text-align: left;
unicode-bidi: plaintext;
text-overflow: ellipsis;
}
<form>
<input type="text" class="rightAligned" name="name" value="">
</form>
not selector는 현재 잘 지원됩니다 : 브라우저 지원
CSS없이 : 텍스트 입력의 STYLE 속성 사용
STYLE = "텍스트 정렬 : 오른쪽;"
text-align:right
는 확실히 CSS입니다.