How to use multiplate onkeyup input?

Question

I have this input, I want use 2 onkeyup in one input, How use it?

I want sepret my number 3 number with comma and I want my input value of a factor of 10 too.

For example, if the user enters the number 100214, the user will immediately see the number 10021 (No decimal) in span result and see the number 100,214 in input.

function separateNum(value, input) {

    var nStr = value + '';
    nStr = nStr.replace(/\,/g, "");
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    if (input !== undefined) {

        input.value = x1 + x2;
    } else {
        return x1 + x2;
    }
}

function onInputChange(e) {
    const span = document.getElementById('result');
    span.innerHTML = Math.floor(e.value / 10);
}

<input type="text" onkeyup="onInputChange(this); separateNum(this.value,this);">
<span id='result'>please enter number</span>

DCR · Accepted Answer · 2021-02-15T19:06:13.310

0

function test2(value, input) {

    var nStr = value + '';
    nStr = nStr.replace(/\,/g, "");
    x = nStr.split('.');
    x1 = x[0];
    
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
     console.log(x1)
    }
    if (input !== undefined) {

        input.value = x1 + x2;
    } else {
        return x3 + x2;
    }
}

function test1(e) {
    const span = document.getElementById('result');
    
    e.value = e.value.replace(/,/gi,'')
    span.innerHTML = Math.floor(e.value / 10);
}

<input type="text" onkeyup="test1(this); test2(this.value,this);"/>
<div id='result'></div>

change this:

<input type="text" onkeyup="onInputChange(this)" onkeyup="separateNum(this.value,this);">

to:

<input type="text" onkeyup="onInputChange(this); separateNum(this.value,this);">

edited Feb 15 '21 at 19:06

answered Feb 15 '21 at 17:48

DCR

14,737
12
52
115

Thanks @dcr , Cause I do seprated number input 3 number, my secend function have NaN error. Do you have any idea for it? – omid Feb 15 '21 at 17:54
once inside your function do a console.log(value) and tell us what you get back – DCR Feb 15 '21 at 18:00
I updated the snippet to take care of the nan – DCR Feb 15 '21 at 19:06

Scott Marcus · Answer 2 · 2021-02-15T18:08:20.277

You should not be using inline HTML event attributes in today's world. Inline event attributes like onXyz where how we "wired" up event handling functions to events before we had standards 25+ years ago. Using this technique today "works", but introduces shortcomings and, in some cases, bigger problems.

Instead, follow modern standards and use .addEventListener() separately in JavaScript, which provides a more robust mechanism for event handling registrations (and de-registrations). In your case, you would just register two handlers for the same event and they will be invoked in the order that you registered them:

// Get a reference to the HTML element
const input = document.querySelector("input");

// Register event handlers
input.addEventListener("keyup", foo1);
input.addEventListener("keyup", foo2);

function foo1(event){
  console.log("foo1 detected key up after " + event.key + " was pressed and now the input is: " + this.value);
}

function foo2(event){
  console.log("foo2 detected key up after " + event.key + " was pressed and now the input is: " + this.value);
}

<input type="text">

How to use multiplate onkeyup input?

2 Answers2