값을 통화로 설정(in)
저는 자바스크립트를 이용하여 사용자가 입력한 숫자를 통화로 포맷하려고 합니다.이 제품은 잘 작동합니다.<input type="text" />. 단, 온<input type="number" />숫자가 아닌 값이 포함된 값을 설정할 수 없을 것 같습니다.다음 fiddle은 나의 문제를 보여줍니다.
제가 그 값을 다음과 같이 설정할 수 있는 방법이 있을까요?$125.00?
사용하고싶습니다<input type="number" />그래서 모바일 기기는 숫자 입력을 위해 키보드를 띄우는 것을 알고 있습니다.
더하다step="0.01"에게<input type="number" />매개변수:
<input type="number" min="0.01" step="0.01" max="2500" value="25.67" />
데모: http://jsfiddle.net/uzbjve2u/
하지만 달러 표시는 문자함 밖에 있어야 합니다.numeric 또는 구분 문자가 아닌 모든 문자가 자동으로 잘라집니다.
그렇지 않으면 여기에 설명된 것과 같은 고전적인 텍스트 상자를 사용할 수 있습니다.
결국 저는 jQuery 플러그인을 만들었습니다.<input type="number" />내게 알맞습니다.나는 또한 몇몇 모바일 기기에서 그것을 알아차렸습니다.min그리고.max속성은 실제로 지정된 숫자보다 더 낮은 숫자나 더 높은 숫자를 입력하는 것을 방해하지 않으므로 플러그인도 이를 설명합니다.아래는 코드와 예시입니다.
(function($) {
$.fn.currencyInput = function() {
this.each(function() {
var wrapper = $("<div class='currency-input' />");
$(this).wrap(wrapper);
$(this).before("<span class='currency-symbol'>$</span>");
$(this).change(function() {
var min = parseFloat($(this).attr("min"));
var max = parseFloat($(this).attr("max"));
var value = this.valueAsNumber;
if(value < min)
value = min;
else if(value > max)
value = max;
$(this).val(value.toFixed(2));
});
});
};
})(jQuery);
$(document).ready(function() {
$('input.currency').currencyInput();
});.currency {
padding-left:12px;
}
.currency-symbol {
position:absolute;
padding: 2px 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="number" class="currency" min="0.01" max="2500.00" value="25.00" />당신들 말이 맞아요 숫자란에만 들어갈 수 있어요.스판 태그에 약간의 CSS 스타일링과 함께 이미 나열된 것과 정확히 동일한 것을 사용합니다.
<span>$</span><input type="number" min="0.01" step="0.01" max="2500" value="25.67">
그런 다음 약간의 스타일링 마법을 추가합니다.
span{
position:relative;
margin-right:-20px
}
input[type='number']{
padding-left:20px;
text-align:left;
}
통화 선택 목록과 값의 숫자 필드, 두 개의 필드가 필요할 것 같습니다.
이러한 경우 일반적인 기법은 디스플레이에 디바 스팬(폼 필드 오프스크린)을 사용하고 클릭 시 편집을 위해 폼 요소로 전환하는 것입니다.
이거 사용했어요.이 코드 조각은 자동으로 숫자를 통화로 포맷하고 달러 기호를 붙입니다.
<div class="main">
<h1>Auto Formatting Currency</h1>
<form method="post" action="#">
<label for="currency-field">Enter Amount</label>
<input type="text" name="currency-field" id="currency-field" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$" value="" data-type="currency" placeholder="$1,000,000.00">
<button type="submit">Submit</button>
</form>
<p>Auto format currency input field with commas and decimals if needed. Text is automatically formated with commas and cursor is placed back where user left off after formatting vs cursor moving to the end of the input. Validation is on KeyUp and a final validation is done on blur.</p>
<p>To use just add the following to an input field:</p>
<pre>data-type="currency"</pre>
</div><!-- /main -->
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: #f5f5f5;
color: #333;
font-family: arial, helvetica, sans-serif;
font-size: 32px;
}
h1 {
font-size: 32px;
text-align: center;
}
p {
font-size: 20px;
line-height: 1.5;
margin: 40px auto 0;
max-width: 640px;
}
pre {
background: #eee;
border: 1px solid #ccc;
font-size: 16px;
padding: 20px;
}
form {
margin: 40px auto 0;
}
label {
display: block;
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
input {
border: 2px solid #333;
border-radius: 5px;
color: #333;
font-size: 32px;
margin: 0 0 20px;
padding: .5rem 1rem;
width: 100%;
}
button {
background: #fff;
border: 2px solid #333;
border-radius: 5px;
color: #333;
font-size: 16px;
font-weight: bold;
padding: 1rem;
}
button:hover {
background: #333;
border: 2px solid #333;
color: #fff;
}
.main {
background: #fff;
border: 5px solid #ccc;
border-radius: 10px;
margin: 40px auto;
padding: 40px;
width: 80%;
max-width: 700px;
}
// Jquery Dependency
$("input[data-type='currency']").on({
keyup: function() {
formatCurrency($(this));
},
blur: function() {
formatCurrency($(this), "blur");
}
});
function formatNumber(n) {
// format number 1000000 to 1,234,567
return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
function formatCurrency(input, blur) {
// appends $ to value, validates decimal side
// and puts cursor back in right position.
// get input value
var input_val = input.val();
// don't validate empty input
if (input_val === "") { return; }
// original length
var original_len = input_val.length;
// initial caret position
var caret_pos = input.prop("selectionStart");
// check for decimal
if (input_val.indexOf(".") >= 0) {
// get position of first decimal
// this prevents multiple decimals from
// being entered
var decimal_pos = input_val.indexOf(".");
// split number by decimal point
var left_side = input_val.substring(0, decimal_pos);
var right_side = input_val.substring(decimal_pos);
// add commas to left side of number
left_side = formatNumber(left_side);
// validate right side
right_side = formatNumber(right_side);
// On blur make sure 2 numbers after decimal
if (blur === "blur") {
right_side += "00";
}
// Limit decimal to only 2 digits
right_side = right_side.substring(0, 2);
// join number by .
input_val = "$" + left_side + "." + right_side;
} else {
// no decimal entered
// add commas to number
// remove all non-digits
input_val = formatNumber(input_val);
input_val = "$" + input_val;
// final formatting
if (blur === "blur") {
input_val += ".00";
}
}
// send updated string to input
input.val(input_val);
// put caret back in the right position
var updated_len = input_val.length;
caret_pos = updated_len - original_len + caret_pos;
input[0].setSelectionRange(caret_pos, caret_pos);
}
https://codepen.io/akalkhair/pen/dyPaozZ
브라우저는 유형이 "number"로 설정된 경우에만 수치 입력을 허용합니다.자세한 건 여기 있습니다.
type="text"를 사용하고 여기에 설명된 것처럼 자바스크립트를 사용하여 숫자 입력 이외의 다른 입력을 걸러낼 수 있습니다.
언급URL : https://stackoverflow.com/questions/14650932/set-value-to-currency-in-input-type-number
'programing' 카테고리의 다른 글
| 최대값에서 왼쪽 조인 (0) | 2023.10.26 |
|---|---|
| 성능 손실을 감수하면서 'if' 문으로 두 개의 유사한 커널을 통합해야 합니까? (0) | 2023.10.26 |
| jGravity 양식 제출 후 콜백 쿼리 (0) | 2023.10.26 |
| How to parse time from database (0) | 2023.10.26 |
| Realize 클래스 프로시저가 정의되지 않았습니다. (0) | 2023.10.26 |