다른 옵션을 선택할 때 입력 필드 유형은 루피 기호가 포함된 20자리 루피를 지원하거나 백분율로 대체될 수 있습니다.
P粉022140576
2023-08-13 18:35:32
<p>고정값을 선택하는 옵션을 선택한 경우 입력 필드 유형은 루피 값이며 루피 기호가 포함된 20자리 숫자만 지원합니다. 백분율을 선택하면 루피 기호가 백분율 기호로 바뀌고 값 유형은 2자리이므로 </p> 버튼을 클릭하지 않고도 값을 입력할 수 있습니다.
<p>이 코드는 잘 작동하지만 두 가지 작은 문제가 있습니다.
1. 내 웹페이지에서 고정값으로 설정된 기본값을 로드하는 경우(그러나 입력값과 루피 기호가 작동하지 않습니다</p><p>
2. 값을 변경하면 둘 다 작동하지만 값이 변경된 상태로 자동으로 재설정되지는 않습니다. 사용자가 단일 백분율을 선택하면 백분율 값이 더 이상 변경되지 않습니다. 내 코드를 확인하십시오.
비슷한 코드입니다</p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<머리>
<title>입력 필드</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<스크립트>
$(문서).ready(함수() {
$('#dropdown').change(function() {
var selectedOption = $(this).val();
if (selectedOption === '고정') {
$('#inputField').attr('maxlength', '20');
$('#inputField').on('입력', function() {
var 값 = $(this).val();
var formattedValue = '₹' + value.replace(/D/g, '').replace(/(d)(?=(d{3})+(?!d))/g, '$1,') ;
$(this).val(formattedValue);
});
} else if (selectedOption === '백분율') {
$('#inputField').attr('maxlength', '2');
$('#inputField').on('입력', function() {
var 값 = $(this).val();
var formattedValue = value.replace(/D/g, '') + '%';
$(this).val(formattedValue);
});
}
});
});
</스크립트>
</머리>
<본문>
<select id="dropdown">
<option value="fixed">고정 값</option>
<option value="백분율">백분율</option>
</선택>
<input type="text" id="inputField">
</body>
</html></pre>
<p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
일을 단순화하고 별도의 함수를 만들고 해당 함수를 기반으로 텍스트 필드에 논리를 적용해 보겠습니다.
예: