введення 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", дійсно, має бути необхідним для отримання десяткових знаків. Отже, вам неодмінно слід ним скористатися. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#step

Зверніть увагу, що якщо ви хочете, щоб кнопки вгору / вниз виконували певну деталізацію, тоді ви повинні вказати числовий крок, такий як ".01".

Крім того, введення цифр зараз досить широко підтримується (> 90% користувачів).

Які варіанти введення існують для грошей / валюти?

Заголовок питання з тих пір змінився і набув дещо іншого значення. Можна прийняти як введення цифр, так і текст, щоб прийняти гроші / десяткові знаки.

Для поля введення валюти / грошей рекомендується використовувати тип введення числа та вказати відповідні атрибути, як зазначено вище. Станом на 2020 рік, не існує специфікації W3C щодо фактичного типу введення валюти або грошей.

Основною причиною є те, що він автоматично примушує користувачів вводити дійсний стандартний формат валюти та забороняє будь-який буквено-цифровий текст. З огляду на це, ви, звичайно, можете використовувати звичайний введення тексту та виконувати певну обробку, щоб захопити лише числове / десяткове значення (у цьому випадку також має бути перевірка на стороні сервера).

В ОП детально викладено вимоги щодо символів валюти та коми. Якщо ви хочете подібну логіку / форматування (станом на 2020 рік), вам потрібно буде створити власну логіку JS для введення тексту або знайти плагін.

Спробуйте скористатися step="0.01", тоді кожен раз це буде крок на копійку.

наприклад:

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

За допомогою Number.prototype.toLocaleString javascript :

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' />

Ну, врешті-решт, мені довелося піти на компроміс, впровадивши рішення 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 дозволяють коми і десяткові коми (якщо це 0,00), де як Chrome / Opera цього не потрібно і потрібні лише цифри.

Думаю, це ганьба, що обертач JQuery не буде працювати з введенням типу числа, але в документах явно зазначено, що цього не робити :-( і я спантеличений, чому віджет обертання чисел дозволяє вводити будь-який символ ascii?

У нас була та ж проблема з прийняттям грошових значень для євро, оскільки <input type="number" />не може відображати євро десятковий формат і формат коми.

Ми придумали рішення <input type="number" />для введення користувачем. Після того, як користувач введе значення, ми відформатуємо його та відобразимо у форматі євро, просто переключившись на<input type="text" /> . Це рішення Javascript, оскільки вам потрібна умова, щоб вирішити між режимами "користувач вводить текст" та "відображати користувачеві".

Ось посилання на Візуальне рішення нашого рішення: Вирішена проблема поля введення типу "Валюта"

Сподіваюся, це якимось чином допоможе!

Я натрапив на цю статтю, шукаючи подібну відповідь. Я прочитав приклад @vsync, використовуючи номер javascript Number.prototype.toLocaleString: і, здається, він добре працював. Єдина скарга у мене була на те, що якщо у вас більше одногоinput type="currency" сторінка на вашій сторінці, це лише змінить її перший екземпляр.

Як він згадує у своїх коментарях, він був розроблений лише як приклад для stackoverflow.

Однак приклад добре працював для мене, і хоча я маю невеликий досвід роботи з JS, я зрозумів, як його змінити, щоб він працював із кількома input type="currency"на сторінці, використовуючи document.querySelectorAllзамість document.querySelectorі додаючи цикл for.

Сподіваюся, це може бути корисним для когось іншого. (Основна частина коду - @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">

Більш просто і красиво, якщо у вас є vue.js v-money-spinner :)