Trennzeichen Tausend erlauben die Punkteingabe mit Javascript

Question

Ich verwende das Attribut oninput , um das Feld input automatisch so zu gestalten, dass beim Einfügen ein Tausendertrennzeichen entsteht, und es hat funktioniert.

Aber was ich erreichen möchte, ist, dass ich auch das Punktzeichen . einfügen darf, da ich zwei Dezimalstellen erhalten möchte. Bisher funktioniert mein Code nicht:

function separator(input) { 
  let nums = input.value.replace(/,/g, '');
  if(!nums)return;
  input.value = parseFloat(nums).toLocaleString(); 
}

function addition() {
  var number1 = document.getElementById('number1').value;
  var number2 = document.getElementById('number2').value;
  number1 = number1.replace(/[,]+/g, '');
  number2 = number2.replace(/[,]+/g, '');
  
  if (number1 == "")
    number1 = 0;
  if (number2 == "")
    number2 = 0;
    
  var result = parseFloat(number1) + parseFloat(number2);
  result = result.toFixed(2);
  if (!isNaN(result)) {
      document.getElementById('total').value = result;
  }
  document.getElementById('total').onchange();
}

<table>
  <tr>
    <td><input onkeyup="addition()" oninput="separator(this)" type="text" id="number1" placeholder="123,456.16"></td>
    <td>+</td>
    <td><input onkeyup="addition()" oninput="separator(this)" type="text" id="number2" placeholder="123,456.16"></td>
    <td>=</td>
    <td><input onchange="separator(this);" type="text" name="total" id="total" placeholder="total" readonly></td>
  </tr>
</table>

Obwohl ich das Feld input mit dem Attribut type="text" festgelegt habe, kann es immer noch keinen Punkt . setzen .

Wie kann ich dieses Problem beheben?

javascript html

1

frianH 12 Aug. 2020 im 23:41

Answer 1

function seprator(input) {
  let nums = input.value.replace(/,/g, '');
  if (!nums || nums.endsWith('.')) return;
  input.value = parseFloat(nums).toLocaleString();
}

<input type="text" id="inputSep" oninput="seprator(this)" placeholder="123,456,789"/>

Codepen Beispiel Link

1

hassan khademi 18 Aug. 2020 im 11:23

Answer 2

Lassen Sie den Browser die Arbeit für Sie mit Intl.NumberFormat

const $input = document.querySelector('input');
const $output = document.querySelector('div');

$input.addEventListener('input', (evt) => {
  $output.innerText = Intl.NumberFormat().format(evt.target.value);
});

<input>
<div></div>

Sie können viele Dinge über das Format der ausgegebenen Nummer anpassen, und in Ihrem Fall möchten Sie möglicherweise die Einstellungen minimumFractionDigits oder maximumFractionDigits anpassen:

const $input = document.querySelector('input');
const $output = document.querySelector('div');

$input.addEventListener('input', (evt) => {
  $output.innerText = Intl.NumberFormat(undefined, {
    maximumFractionDigits: 2
  }).format(evt.target.value);
})

<input>
<div></div>

0

Impirator 12 Aug. 2020 im 20:57

Trennzeichen Tausend erlauben die Punkteingabe mit Javascript

2 Antworten

Verwandte Fragen

Neue Fragen