React Native - Difference between onChangeText and onSubmitEditing? - javascript

From the Facebook React Native Text Input documentation, I was able to discern that this is what happens when onSubmitEditing is used:
Callback that is called when the text input's submit button is pressed.
However, there wasn't anything for onChangeText. I'm assuming if the text has changed, then it will trigger.
Why would I want to use one other than the other? For example if I'm making something that takes in text for the TextInput field, wouldn't I just want to use onChangeText? In some examples I've seen them use onSubmitEditing and I'm confused on why you would use one over the other. This question is different than wondering how to make the submit button - I'm asking why I would use onChangeText vs. onSubmitEditing.

onSubmitEditing is triggered when you click the text input submit button (keyboard button).
onChangeText is triggered when you type any symbol in the text input.
For example, you might need some validation on every key press, in that case you will use onChangeText, if you need the validation to trigger when you finish typing, you need onSubmitEditing
In your example, you will achieve what you need in both cases.

onSubmitEditing is a callback when you tap the button in the screenshot below.
onChangeText is a callback when you type anything into a TextInput.

1: onSubmitEditing
onSubmitEditing : When you want to submit the editing of text field and want to call some action like dimissing the mobile keyboard or calling submit action or API to pass current screen data,one can use it.
In short,when you are done with adding the text to field and want to proceed with some action to next Screen,one can use it.
It called only when one press the keyboard button.
e.g. When we press GO,RETURN,Search button on keyboard.
2: onChangeText
onChangeText : Its typical use to update the state of Component with TextInput value like Reactjs onChange event.
Its called on every change of character.

Related

What event to know when user has entered data into form?

I have a HTML form. I want to enable/disable a button until user eneters text in one of the fields. I am adding an event attribute to the which triggers some javascript. This javascript will enable/disable the button.
Problem is I can't figure out what event attribute to use. What event attribute please will trigger as soon as user enters data? I tried onchange but that only gets called when i clicked back outside the text area. So it may aswell be onblur.
You can use the input
function activateForm (event) {
if(!this.value == ""){
}
}
var input = document.querySelector(".myInput");
input.addEventListener("input", activateForm , false)
There are 2 possible events that can be used: either onChange or onKeyPress. onChange will trigger when the value of an input has changed while onKeyPress will trigger every time the user types something in a text box. The onChange triggers once the user has CHANGED something in the value, and got out of the input focus. That means the user has to hit TAB or click somewhere else for the event to trigger, hence why onKeyPress might be better suited.
Read more:
http://www.w3schools.com/jsref/event_onchange.asp
http://www.w3schools.com/jsref/event_onkeypress.asp
Younger browsers also support onInput which should certainly be prefered for now, if you do not need to support older browsers.

onblur even is not working as expected

I have a form having 5 fields and a submit button.
On one of the fields i am having an onblur event but if the user changes the value in that textbox and directly clicks on submit button then in that case onblur is notgetting triggered or not working.
Even onchange is not working in that case.
What if i use onkeyup and down but if user used mouse for pasting the data?
Please help!
Thanks and regards
Asus.
You might want to try using the onchangeevent or oninput event to track when the input data is being modified. Then you can use the onsubmit event to call whatever function you would like.

How to make a real "onchange" event in HTML (no jQuery)?

Please note: I do not want to use jQuery for this (otherwise I like it)
Problem: I have come to situation where I need to do some javascript function after an user changes an input field (e.g. input type="text"). So I said to myself - I remember an onchange event - BUT onchange event runs AFTER user leaves the field, but I need the function to be called for example every time user types a character to that field. Wowhead shows nice example of what I am trying to achieve this (field with placeholder "Search within results...")
Summary: I am looking for a SIMPLE way of detecting REAL onchange event(not the classic HTML one)and through that call a JS function while not using jQuery?
Use onkeyup instead of onchange then.
Following is a simple way of invoking each type of Key Press on field.
input type="text" onkeypress="myFunction()
Get Example here
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeypress
Enjoy..
you can also use onkeyup and onkeydown instead of onkeypress.
Tried onkeypress="myFunction()" or onkeyup="myFunction()"?
There are also events for onfocus and onblur for entering and leaving a textfield :)
You should use "input" event. keyup and keypress don't work if a user modified the value only by a mouse.

Is it possible to set the pre-change value of an input element

I have an input element with an onchange event. The onchange event alerts the user if the value is not accepted, and returns focus back to the input element.
However, if the user then clicks out of the element, the onchange event doesn't fire - which is understandable since the user hasn't made a further change, but it introduces the problem of only validating once.
I explored a possible solution to reset the value back to what it was before it was changed, but I'd like to avoid that if at all possible for the sake of allowing the user to correct the value they entered without having to type the whole thing again.
Another possibility was to put the validation into the blur event but this would introduce other problems such as events on other elements firing if they are focused.
So my question is, if the user changes the input value from 'X' to 'Y', can I return focus to the element, leaving the value as 'Y' but make it treat 'X' as the pre-change value, thus behaving so if the user changes it back to 'X' the change event will not subsequently fire, but if they leave it as 'Y' and lose focus again, the change event fires again as if changing from 'X' to 'Y'?
Why not just mark the field as invalid (using CSS or jQuery to add markup) instead of using an alert? The field remains invalid until the user changes the value to a valid one, and the validation script removes the invalid marking.
Is the input type text? In these circumstances I prefer to use onkeyup instead of onchange for the very reason you're describing.
Sometimes even that doesn't work: This will not capture the change when text is pasted into the text box using a mouse since a key isn't pressed (but shift+insert or ctrl+v are). You might want to add the same event to both onchange and onkeyup to cover all bases.

How to Detect an Event Coming from the Firefox History Dropdown Box

How to detect an event coming from the Firefox history dropdown box?
I need to distinguish between the enter key simply pressed on input field or on item from his native history dropdown box.
The reason is that I would like to call custom submit button (not first one, which is default) on the enter key pressed on any input field. But right now, the enter key pressed on history dropdown box unfortunately call submit as well.
Why not just implement a "submit" event handler and do your special stuff there?
What about using each input's onFocus and onBlur events to dynamically change your submit code as the user shifts focus to and from your controls?
onFocus for any control sets your submit action to be action A.
onBlur for any control sets your submit action to be action B.

Categories

Resources