화폐 / 통화에 대한 HTML5 입력

화폐 / 통화에 대한 HTML5 입력

---

양식에서 금전적 가치를 받아들이 기 위해 무엇을 사용해야할지 알 수없는 것 같습니다.

나는 시도했다 ...

<input type="number" min="0" max="10000" step="1" name="Broker_Fees" id="broker_fees" required="required">

그러나 그것은 펜스 항목을 허용하지 않습니다.

증분 버튼 컨트롤이 파운드 단위로 올라 가기를 원하지만 여전히 펜스에 들어갈 수있는 기능을 원합니다.

한 번에 1p 씩 이동하는 증분 버튼을 누가 사용하고 싶습니까?

아마도 내가 잘못된 컨트롤을 사용하고 있는데 돈 / 통화 컨트롤을 찾을 수 없습니까?

누군가 HTML5를 사용하여 금전적 가치 (쉼표, 소수점, 통화 기호 포함)를 허용하는 가장 좋은 방법을 조언 해 주시겠습니까?

감사합니다, 1DMF

---

HTML5 숫자 입력에 분수 (센트)를 허용하려면 "step"속성을 "any"로 지정해야합니다.

<input type="number" min="1" step="any" />

이것은 특히 십진수 / 분수 통화가 입력에 입력 될 때 Chrome에서 오류를 표시하지 않도록합니다. Mozilla, IE 등은 지정하는 것을 잊었더라도 오류가 발생하지 않습니다 step="any". W3C 사양에 따르면 십진수를 허용하려면 step = "any"가 실제로 필요합니다. 따라서 반드시 사용해야합니다.

또한 숫자 입력이 현재 상당히 광범위하게 지원됩니다 (사용자의 90 % 이상).

---

을 사용해보십시오 step="0.01". 그러면 매번 한 푼씩 밟아갑니다.

예 :

<input type="number" min="0.00" max="10000.00" step="0.01" />

---

자바 스크립트의 Number.prototype.toLocaleString 사용 :

var currencyInput = document.querySelector('input[type="currency"]');
var currency = 'GBP'; // https://www.currency-iso.org/dam/downloads/lists/list_one.xml

currencyInput.addEventListener('focus', onFocus);
currencyInput.addEventListener('blur', onBlur);

function localStringToNumber( s ){
    return Number(String(s).replace(/[^0-9.-]+/g,""));
}

function onFocus(e){
  var value = e.target.value;
  e.target.value = value ? localStringToNumber(value) : '';
}

function onBlur(e){
  var value = e.target.value;

  const options = {
      maximumFractionDigits : 2,
      currency              : currency,
      style                 : "currency",
      currencyDisplay       : "symbol"
  }
  
  e.target.value = value 
    ? localStringToNumber(value).toLocaleString(undefined, options)
    : ''
}

input{
  padding: 10px;
  font: 20px Arial;
}

<input style='width:70%' type='currency' placeholder='Type a number & click outside' />

---

결국 나는 HTML5 / CSS 솔루션을 구현하고 IE에서 증가 버튼을 사용하지 않고 타협해야했지만 (어쨌든 FF에서는 조금 고장났습니다!), JQuery 스피너가 제공하지 않는 숫자 유효성 검사를 얻었습니다. 나는 정수 단계로 가야했지만.

span.gbp {
    float: left;
    text-align: left;
}

span.gbp::before {
    float: left;
    content: "\00a3"; /* £ */
    padding: 3px 4px 3px 3px;
}

span.gbp input {
     width: 280px !important;
}

<label for="broker_fees">Broker Fees</label>
<span class="gbp">
    <input type="number" placeholder="Enter whole GBP (&pound;) or zero for none" min="0" max="10000" step="1" value="" name="Broker_Fees" id="broker_fees" required="required" />
</span>

The validation is a bit flaky across browsers, where IE/FF allow commas and decimal places (as long as it's .00), where as Chrome/Opera don't and want just numbers.

I guess it's a shame that the JQuery spinner won't work with a number type input, but the docs explicitly state not to do that :-( and I'm puzzled as to why a number spinner widget allows input of any ascii char?

---

We had the same problem for accepting monetary values for Euro, since <input type="number" /> can't display Euro decimal and comma format.

We came up with a solution, to use <input type="number" /> for user input. After user types in the value, we format it and display as a Euro format by just switching to <input type="text" />. This is a Javascript solution though, cuz you need a condition to decide between "user is typing" and "display to user" modes.

Here the link with Visuals to our solution: Input field type "Currency" problem solved

Hope this helps in some way!

---

I use "money" input

<input type="money" name="price" size="6" value="<?php echo $price; ?>" /> €<br/> 

참고URL : https://stackoverflow.com/questions/24163889/html5-input-for-money-currency