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 
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 
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
Yep. This is example with jQuery. Your code is javascript.
Yep. I added tables.
I have time, but don’t forget me
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
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.
https://jsfiddle.net/alumic/exj15dfy/8/
- 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.