입력 후 입력 상자에 % 기호를 표시하는 방식으로 양식의 요소를 스타일로 입력 할 수 있습니까?

Question

사용자가 입력 한 후에 HTML 입력 필드에 수량 기호를 표시하는 방법이 있습니까?

예를 들어, 나는 다음과 같은 80 % 는하지만 사용자는 입력 상자에 80를 입력하려면, 필드 백분율을 입력합니다, 나는 숫자 뒤에 표시 할 % 기호를 원하지만 실제로는하지 입력의 일부. 양식을 제출할 때 제출할 번호 만 표시하고 백분율 기호는 원하지 않습니다.

이 작업을 수행 할 수 있습니까?

% 기호 이외에도 일반적으로 사용자가 50 만 입력 할 것으로 예상되는 50Hz와 같은 다른 수량으로이 작업을 수행 할 수 있으며 Hz는 입력 후에 볼 수있는 한정 기호입니다.

참고 : 나는 순수 CSS 또는 다른 "장식 전용"접근 방식과 그 점에서 기대하고

, 확실히이 문제를 접근하는 방법을 모르겠어요. 나의 희망은 한정어로 들어가서는 안된다는 것이다. 예를 들어, 한정 기호가 Hz 인 경우 사용자가 "50 Hz"를 입력하지 않고 "50"을 입력하고 그 뒤에 Hz가 표시되도록합니다. 나는 더 오른쪽 끝에 % 기호가있는 배경 이미지를 만들 수 있습니다. 또 다른 해결책은 레이블, 즉 백분율 (%)을 사용하고 사용자가 % 부호없이 숫자 만 입력하도록합니다.

Answer 1

여기 있습니다.

$가 추가되었는지 확인한 다음 추가하지 않은 경우 추가하십시오!

참조 : 천천히 입력하면 here

$("#test").on("keydown", function(event) { 
 
    var val = $(this).val(); 
 
    var bool = event.ctrlKey || event.shiftKey || event.keyCode == 8; 
 
    if (!bool) { 
 
    if (val.indexOf('$') == -1) { 
 
     $(this).val(val + '$'); 
 
     this.selectionStart = this.selectionEnd = $(this).val().length - 1; 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="test" type="text" />