화폐 / 통화에 대한 HTML5 입력

Question 1

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

나는 시도했다 ...

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

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

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

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

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

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

감사합니다, 1DMF

Question 2

숫자 입력을 위해 분수 / 중앙 / 소수 활성화

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

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

이것은 특히 십진수 / 분수 통화가 입력에 입력 될 때 Chrome에서 오류를 표시하지 않도록합니다. Mozilla, IE 등은 지정하는 것을 잊어도 오류가 발생하지 않습니다 step="any". W3C 사양에 따르면 십진수를 허용하려면 step = "any"가 실제로 필요합니다. 따라서 반드시 사용해야합니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step

위 / 아래 버튼이 특정 단위를 수행하도록하려면 ".01"과 같은 숫자 단계를 지정해야합니다.

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

화폐 / 통화에 대해 어떤 입력 옵션이 있습니까?

그 이후로 질문의 제목이 바뀌었고 약간 다른 의미를 갖습니다. 돈 / 소수를 받아들이 기 위해 숫자 또는 텍스트 입력을 모두 사용할 수 있습니다.

통화 / 돈에 대한 입력 필드의 경우 입력 유형의 숫자를 사용하고 위에 설명 된대로 적절한 속성을 지정하는 것이 좋습니다. 2020 년 현재, 실제 입력 유형의 통화 또는 화폐에 대한 W3C 사양이 없습니다.

주된 이유는 사용자가 유효한 표준 통화 형식을 입력하도록 자동으로 강요하고 영숫자 텍스트를 허용하지 않기 때문입니다. 즉, 일반 텍스트 입력을 사용하고 숫자 / 십진수 값만 가져 오기 위해 일부 사후 처리를 수행 할 수 있습니다 (언젠가는 서버 측 유효성 검사도 있어야 함).

OP는 통화 기호와 쉼표의 요구 사항을 자세히 설명했습니다. 더 멋진 로직 / 포맷을 원한다면 (2020 년 현재) 텍스트 입력을위한 커스텀 JS 로직을 생성하거나 플러그인을 찾아야합니다.

Question 3

를 사용해보십시오 step="0.01". 그러면 매번 1 페니 씩 밟아갑니다.

예 :

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

스 니펫 확장

Question 4

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

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

 // format inital value
onBlur({target:currencyInput})

// bind event listeners
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

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

input{
  padding: 10px;
  font: 20px Arial;
  width: 70%;
}

<input type='currency' value="123" placeholder='Type a number & click outside' />

스 니펫 확장

Question 5

결국 나는 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>

스 니펫 확장

유효성 검사는 IE / FF에서 쉼표와 소수점 이하 자릿수 (.00 인 경우)를 허용하는 브라우저에서 약간 불안정합니다.

JQuery 스피너가 숫자 유형 입력과 함께 작동하지 않는 것이 부끄러운 일이지만 문서는 명시 적으로 그렇게하지 않도록 명시하고 있습니다.

Question 6

<input type="number" />유로 십진수 및 쉼표 형식을 표시 할 수 없기 때문에 유로에 대한 화폐 가치를 수락하는 데 동일한 문제가있었습니다 .

우리는 <input type="number" />사용자 입력 에 사용할 솔루션을 찾았습니다 . 사용자가 값을 입력 한 후로 전환하여 형식을 지정하고 유로 형식으로 표시합니다 <input type="text" />. 하지만 이것은 자바 스크립트 솔루션입니다. "사용자가 입력 중입니다"와 "사용자에게 표시"모드를 결정하는 조건이 필요하기 때문입니다.

솔루션에 대한 Visuals 링크 : 입력 필드 유형 "통화"문제 해결

이것이 어떤 식 으로든 도움이되기를 바랍니다!

Question 7

나는 비슷한 대답을 찾기 위해이 기사를 우연히 발견했습니다. @vsync 예제 Using javascript 's Number.prototype.toLocaleString :을 읽었으며 잘 작동하는 것 같습니다. 내가 가진 유일한 불만은 input type="currency"페이지에 하나 이상의 것이 있으면 첫 번째 인스턴스 만 수정한다는 것입니다.

그가 그의 코멘트에서 언급했듯이 그것은 단지 stackoverflow의 예로서 설계되었습니다.

그러나 예제는 저에게 잘 작동했으며 JS에 대한 경험이 거의 없지만 for 루프를 추가하는 대신 input type="currency"페이지 에서 여러 개로 작동하도록 수정하는 방법을 알아 냈습니다 .document.querySelectorAlldocument.querySelector

다른 사람에게 유용 할 수 있기를 바랍니다. (대량의 코드에 대한 크레딧은 @vsync입니다)

var currencyInput = document.querySelectorAll( 'input[type="currency"]' );

for ( var i = 0; i < currencyInput.length; i++ ) {

    var currency = 'GBP'
    onBlur( {
        target: currencyInput[ i ]
    } )

    currencyInput[ i ].addEventListener( 'focus', onFocus )
    currencyInput[ i ].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

        var options = {
            maximumFractionDigits: 2,
            currency: currency,
            style: "currency",
            currencyDisplay: "symbol"
        }

        e.target.value = ( value || value === 0 ) ?
            localStringToNumber( value ).toLocaleString( undefined, options ) :
            ''
    }
}

    var currencyInput = document.querySelectorAll( 'input[type="currency"]' );

    for ( var i = 0; i < currencyInput.length; i++ ) {

        var currency = 'GBP'
        onBlur( {
            target: currencyInput[ i ]
        } )

        currencyInput[ i ].addEventListener( 'focus', onFocus )
        currencyInput[ i ].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

            var options = {
                maximumFractionDigits: 2,
                currency: currency,
                style: "currency",
                currencyDisplay: "symbol"
            }

            e.target.value = ( value || value === 0 ) ?
                localStringToNumber( value ).toLocaleString( undefined, options ) :
                ''
        }
    }

.input_date {
    margin:1px 0px 50px 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #111;
    display: block;
    background: #ddd;
    height: 50px;
    border-radius: 5px;
    border: 2px solid #111111;
    padding: 0 20px 0 20px;
    width: 100px;
}

    <label for="cost_of_sale">Cost of Sale</label>
    <input class="input_date" type="currency" name="cost_of_sale" id="cost_of_sale" value="0.00">

    <label for="sales">Sales</label>
    <input class="input_date" type="currency" name="sales" id="sales" value="0.00">

     <label for="gm_pounds">GM Pounds</label>
     <input class="input_date" type="currency" name="gm_pounds" id="gm_pounds" value="0.00">

스 니펫 확장

Question 8

vue.js v-money-spinner 가 있으면 더 쉽고 아름답습니다. :)

Question 9

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

 // format inital value
onBlur({target:currencyInput})

// bind event listeners
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

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

input{
  padding: 10px;
  font: 20px Arial;
  width: 70%;
}

<input type='currency' value="123" placeholder='Type a number & click outside' />