CODEWITHSUNDEEP
javascripthtmldata-bindinginputrange
wide_eyed_pupil
wide_eyed_pupil

Reputation: 3451

Is there a way to get direct binding to a "number" input field that watches the arrows?

I have a set of inputs and for each value that I'm inputting I have a "range" slider and a "number" input. I have a little bit of JS that is called by both the slider and the number field using the onchange="send(input_id, input_kind, this.value)" attribute for each input. If the slider moved I update the number and if the number changed I update the slider.

This is fine for the slider as as soon as one moves it, the number starts tracking along. When one adjusts the number with the little up/down arrows or types numbers the slider does not update. The JS is not called until another field is selected, i.e.. the input loses focus then it passes it's data to me bind{k, d, v} function.

HTML:

            <div class="number-pair">
                <sub-title>X-Position</sub-title><br />
                <input id="/layout/1/slider" class="slider" type="range" value="0" min="-1" max="1" step="0.01" onchange="bind('/layout/1', 'slider', parseFloat(this.value))" />
                <input id="/layout/1/number" class="number-box" type="number" value="0" min="-1" max="1" step="0.01" onchange="bind('/layout/1', 'number', parseFloat(this.value))" /><br />    
            </div>

JS:

        function bind(id, control, v)
        { 
            if (control=="slider")
            {
            if (console) console.log("It's a slider");
                e = document.getElementById("/layout/1/number");
                if (e)
                {
                    e.value = v;
                }
            } else if (control=="number")
            {
            if (console) console.log("It's a float");                   
                e = document.getElementById("/layout/1/slider");
                if (e)
                {
                    e.value = v;
                }
            }
        }

How can I get a more responsive binding for using number arrows?

N.B. I'm not just binding the two inputs to each other but to on-screen effects elsewhere so move responsive binding is desirable in that context not just the slider which I could live with. Also I'm using literals to find update the paired value in my JS but literals will be replaced with a dynamic expression so I can bind a whole range of slider/text number input pairs.

Upvotes: 0

Views: 1406

Answers (3)

Vitim.us
Vitim.us

Reputation: 22168

onchange only trigger the event, when the element loses focus.

To more responsive feedback you should use:

onmousedown onmouseup events on slider, you can also use onmousemove to "realtime" effect. onkeypress on the text field.

Upvotes: 1

saluce
saluce

Reputation: 13360

On the input fields, bind to the onkeypress, rather than the onchange event, because the onchange event isn't called until the control loses focus. To trap arrow presses, bind to the onclick event.

Upvotes: 1

PitaJ
PitaJ

Reputation: 15084

Why don't you try using onkeypress and onclick:

            <div class="number-pair">
<br />

                               
               

Upvotes: 1

Related Questions