값을 통화로 설정

값을 통화로 설정

---

사용자가 입력 한 숫자를 javascript를 사용하여 통화 형식으로 지정하려고합니다. 이것은에서 잘 작동합니다 <input type="text" />. 그러나 <input type="number" />숫자가 아닌 값을 포함하는 값으로 값을 설정할 수없는 것 같습니다. 다음 바이올린은 내 문제를 보여줍니다.

http://jsfiddle.net/2wEe6/72/

어쨌든 내가 값을 다음과 같이 설정할 수 $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/

그러나 달러 기호는 텍스트 상자 외부에 있어야합니다. 숫자가 아닌 모든 문자 또는 구분 문자는 자동으로 잘립니다.

그렇지 않으면 여기에 설명 된 것과 같은 고전적인 텍스트 상자를 사용할 수 있습니다 .

---

결국 나는 <input type="number" />나를 위해 적절한 형식을 지정할 jQuery 플러그인을 만들었 습니다. 또한 일부 모바일 장치에서는 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" />

---

너희들은 완전히 맞는 숫자는 숫자 필드에만 들어갈 수 있습니다. 나는 span 태그에 약간의 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 또는 span을 사용하고 (화면 외부의 양식 필드) 클릭시 편집을 위해 양식 요소로 전환하는 것입니다.

---

The browser only allows numerical inputs when the type is set to "number". Details here.

You can use the type="text" and filter out any other than numerical input using JavaScript like descripted here

ReferenceURL : https://stackoverflow.com/questions/14650932/set-value-to-currency-in-input-type-number