Oninput event

Here is example: https://jsfiddle.net/alumic/6q0nuxkg/3/
Some text… and second input is disabled.
if you click in first input then second input not enabled
IF use Backspace then work all…

I want Click method!!!

Hi there @IseeYou, welcome to the forums

I’m not sure if this is the whole problem, but IDs cannot start with a number.

HTH

2 Likes

IDs no problem…

oninput does not accept “Click” or something…

https://s1.webmshare.com/BAxGE.webm
Must press Enter

onClick where? There’s nothing to click on.

Here is example: https://jsfiddle.net/alumic/6q0nuxkg/3
Write some text like 4 <input id=“text”.
Second input clear number and is disabled.

Now you must click first input where is 4.
But second input still disabled.

First input have 4 and use Backspace then second input is enabled.

Sorry english not good.

It is not very clear what you want. I understand it must be difficult in a second language. (I struggle with one! )

I don’t know if this is helpful, it could be totally wrong.

<body>
  <input id='text' placeholder='Some text...' type='text'/>
  <input id='disabled-empty' value='' type='text'/>
<script>
  document.addEventListener('DOMContentLoaded', function(event) {

    const input = document.getElementById('text')
    const disabledEmpty = document.getElementById('disabled-empty')

    // clicking in the input box
    input.onfocus = function (event) {
      disabledEmpty.disabled = true
      disabledEmpty.value = ''
    }

    // leaving the input box
    input.onblur = function (event) {
      disabledEmpty.disabled = (this.value !== '')
    }

    // typing in the input box
    input.oninput = function (event) {
      disabledEmpty.disabled = (this.value !== '')
    }
  })
</script>
1 Like

Not quite right, but almost.

The correct example is here: https://jsfiddle.net/alumic/wnqz2xtd/7/
JQuery 2.1.3 has been used here, but I want a clean javascript.
Here I use “keyup” not “click” inp2.addEventListener(‘keyup’, () => {

And your script not use: onfocus=“this.value=’’”

That’s right. It’s good practice to keep javascript separate from you html if you can.

Anyway here is my interpretation of your jquery code. It could probably be simplified.

HTML

<form id='form-01'>
  <input type="text" id="main-input" placeholder="Some text..."/>
  <input type="text" id="text-01" value="44"/>
  <input type="text" id="text-02" value="42"/>
  <input type="text" id="text-03" value="40"/>
</form>

Javascript

document.addEventListener('DOMContentLoaded', function(event) {

  function enableInput (input) {
    input.disabled = false
  }

  function disableInput (input) {
    input.disabled = true
    input.value = ''
  }

  function clearInputHandler (event) {
    const elem = event.target

    // if not an input return
    if (elem.nodeName !== 'INPUT') return
    elem.value = ''
  }

  function mainInputHandler (event) {
    const elem = event.target

    // if main input empty enable the other inputs
    if (elem.value === '') {
      otherInputs.forEach(enableInput)
      return
    }

    // else disable and clear the other inputs
    otherInputs.forEach(disableInput)
  }

  const form = document.querySelector('#form-01')

  // [ main-input, text-01, text-02, text-03 ] = [ mainInput, ...and the rest ]
  const [ mainInput, ...otherInputs ] = form.querySelectorAll('input[type=text]')

  // listen on the parent form for focus events
  // and clear the input if focused
  form.addEventListener('focusin', clearInputHandler, false)

  mainInput.addEventListener('keyup', mainInputHandler)
})

Just a small simplification. We could use class names instead

So HTML

<form id='form-01'>
  <input type="text" class='main-input' id="main-input" placeholder="Some text..."/>
  <input type="text" class='other-inputs' id="text-01" value="44"/>
  <input type="text" class='other-inputs' id="text-02" value="42"/>
  <input type="text" class='other-inputs' id="text-03" value="40"/>
</form>

And then instead of the destructuring and spread operator in the previous version e.g.

const [ mainInput, ...otherInputs ] = ....

we can just get the elements by .classname

// form is the parent
const form = document.querySelector('#form-01')
// these are the children
const mainInput = form.querySelector('.main-input')
const otherInputs = form.querySelectorAll('.other-inputs')

Note for clearing the input boxes on focus I have made use of ‘Event Delegation’.

The eventlistener is attached to the form (the parent) and listens to all focus events from it’s child elements.

Here is a link which might be useful bubbling and capturing

Full script with changes

<form id='form-01'>
  <input type="text" class='main-input' id="main-input" placeholder="Some text..."/>
  <input type="text" class='other-inputs' id="text-01" value="44"/>
  <input type="text" class='other-inputs' id="text-02" value="42"/>
  <input type="text" class='other-inputs' id="text-03" value="40"/>
</form>
document.addEventListener('DOMContentLoaded', function(event) {

  function enableInput (input) {
    input.disabled = false
  }

  function disableInput (input) {
    input.disabled = true
    input.value = ''
  }

  function clearInputHandler (event) {
    const elem = event.target

    if (elem.nodeName !== 'INPUT') return
    elem.value = ''
  }

  function mainInputHandler (event) {
    const elem = event.target

    if (elem.value === '') {
      otherInputs.forEach(enableInput)
      return
    }

    otherInputs.forEach(disableInput)
  }

  const form = document.querySelector('#form-01')
  const mainInput = form.querySelector('.main-input')
  const otherInputs = form.querySelectorAll('.other-inputs')

  mainInput.addEventListener('keyup', mainInputHandler, false)
  form.addEventListener('focusin', clearInputHandler, false)
})
1 Like

Last code here: https://jsfiddle.net/alumic/68vpx4qy/30/

Code almost works… You can test R9
Please check again: https://jsfiddle.net/alumic/wnqz2xtd/7/
Write something here (Some text…) and press the mouse. Input’s wake up and not disabled, but your script is disabled. Your script must use “Backspace”.

Is it possible to play when you click R1, then R9 is disabled?
Multifunctional :slight_smile:

More power if you want:
This script not good for me, needs to change a bit.
Example: https://jsfiddle.net/7XLqQ/3/
Can write only numbers dot backspace and minus.

I want:
// Allow the minus sign (-) if the user enters it first
This is correct but only id=“R3” - other ID’s cant use -

Want use dot (.) and all ID’s
Cant enters it first:
45.5 (correct)
.056 (wrong)
45…5 (double dot is wrong)
45.5. (wrong)

Comma is bonus.
If write " , " then replace . (dot)

Hard core never stop :smiley:

That’s not my code

The following is my javascript, but with completely different HTML. We have now moved on to tables.

Goal posts are moving.

I’m sorry IseeYou, but don’t have the time right now to build forms for you. I will have a look later if I have a chance, or someone else may step in :smiley:

Yep. This is example with jQuery. Your code is javascript.

Yep. I added tables.

I have time, but don’t forget me :smiley:

rpg_digital

You don’t have to do this > only numbers in input.

I use <input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /> or something.

Hi @IseeYou, you don’t need JS for this, just use a number type input:

<input type="number">
2 Likes

Yes, I write “only numbers” but I need too minus and dot. Regex is so hard but I try.
Allow the minus sign (-) if the user enters it first (Only one ID)
Dont allow the dot sign (.) if the user enters it first
Allow comma sign (,) but replace comma to dot

Allow the minus sign (-) if the user enters it first (Only one ID)


Something like this… minus cant delete. Now I must add number and dot. Hard level.

Did have a mess around in regex101, and came up with the following

^\-?\d(?:(?:[.,]\d{3})+|\d+)?(?:[.]\d+)?$

Tests

0.235         pass
1,234,555     pass
1,234,55      fail
-1,234        pass
1,234,555.345 pass
.123          fail
0             pass
2.123,456.789 pass
12345,123.045 fail
12345.045     pass

I don’t think it’s a good way to go though. type='number' makes more sense.

What is the end use, what are these numbers for?

Everything has to do with it: https://jsfiddle.net/alumic/68vpx4qy/30/
This form is my calculator.

I see 100 different codes, but none are right for me :smiley:

This code is close but need little change https://jsfiddle.net/alumic/eon408z7/57/
Allow comma (,) and replace to dot (.) like this: https://jsfiddle.net/alumic/m9xcv1ao/
Write 44,(,) then script replace to dot. result is 44.

One ID must start with a minus and cannot be delete.

  • cant delete

Other ID’s start numbers

Thanks, if can help.

If it were me I would just set the field to be type=“number” and let the web browser manage things further from there.

1 Like

I cant use here type=“number” but it doesn’t important right now.

This is very imporant, then can finish my script.
Last code here: https://jsfiddle.net/alumic/68vpx4qy/30/

Code almost works… You can test R9
Please check again: https://jsfiddle.net/alumic/wnqz2xtd/7/
Write something here (Some text…) and press the mouse. Input’s wake up and not disabled, but your script is disabled. Your script must use “Backspace”.

Is it possible to play when you click R1, then R9 is disabled?
Multifunctional

Why can’t you use type="number" ? That is a very successful solution that is designed to do basically all of what you are wanting to achieve here.