Capturing HTML Text Input Key press after key has been applied? - javascript

A total newbie question, so please bear with me here ;)
When a key press occurs in a HTML text input control, there are two events that seem useful in managing it (onKeyPress and onChanged). onKeyPress fires after the key has been pressed, but before the operation has been applied to the control's text. The later is only fired when focus is removed from the control and edits were made.
My question: Is there a way to capture the event, after the key press has been applied to the control but w/o removing focus (so I can work off of the resultant text)? Or is this pretty much the options I have to work off of?
Thanks!

You may also want to look at onkeyup and onkeydown events. I suspect you're interested in onkeyup. Perhaps you could provide more info and I could give a more complete example.

Related

Disable Shift-Enter in contenteditable

I'm creating a barebones in-browser code editor with a pre marked as contenteditable. I'm listening to the input event to perform code highlighting and some other side effects.
When a user hits Shift+Enter two line breaks are inserted which confuses my program and messes up cursor positioning. Is there a way to disable this?
In my opinion one would need to be able to detect that the SHIFT and ENTER keys were pressed. However, the INPUT event does not appear to contain that data. If you can use an event listener that contains data about all keys being used for a single event, then you may be able to use something like event.preventDefault() in the callback. I do not know what the context of all your code is, so I do not know if it is feasible to use other events, specifically keypress.
I also cannot reproduce the issue you are describing. You may be using a plugin that causes the double-spacing issue.

Text changed event on jQuery when not fired with keyboard

Is there a way to fire an event every time I change the text on an <input type="text"> when the changes are not made pressing keys on the keyboard?
What I mean is I want to capture when somebody type in, right-click -> paste or drag a selected text on an input and not only when a key is pressed.
I've tried:
<input id="some-id" onchange="alert('fired')">
and
$('#some-id').on('change', ev_handler);
$('#some-id').change(ev_handler);
the only event that fires are the ones related to key press but they don't fire on pasting or dragging.
oninput event could met your needs, but just note it's not well supported in older browsers. You can find more info on Dottoro.
If you need to cover all browsers and all use cases like you mentioned, there is really no better way then periodically check (for example every 500ms) your input value with JavaScript.
You can find discussion about that here on StackOverflow.
Try the onChange event, that should be issued everytime the input is changed, no matter how.

Catching all changes to the contents of an input box using JavaScript/jQuery

I have a page with an input box, and a function that processes the value of this input box and produces piece of text. I want this text to always be up to date in relation to the contents of the input box, so I've attached a couple of event handlers to it with jQuery to catch any changes:
$('#input').bind('keyup cut paste', function(){...});
This works well in most cases. Whenever the user modifies the contents using the keyboard in any way, or right-clicks to use the cut or paste functions, the text is updated immediately. However, there are two events I still haven't figured out how catch, if it's even possible to do so:
When the user selects a of text and drags it do a different position in the input box
When the user uses the Delete action in the right-click context menu
Both of these can of course be detected by binding the change event, but the problem with that approach is that it doesn't fire until the input box loses focus. The whole point of these bindings is to have the text update in real-time as the value of the input box changes, so change is no good.
English is my second language so I could simply be bad at wording my Google searches, but so far they've turned up nothing. I haven't found any solutions to this after digging through a couple of related Stack Overflow pages either, so I'm asking here. Is there an event binding for this that I don't know of? If not, is there a different approach I could take? Or is this simply not possible with plain JavaScript?
In non-IE browsers, you can handle the input event.
In IE, you can handle the propertychange event.
Demo (works in all browsers)
It's possible this SO question (and related jsfiddle) might answer your question.
(On the linked jsfiddle, put text in the top box to test)
In other words, bind to mouseup and mousedown, etc.
If you can't find a combination of events that cover all cases, you may want to use setInterval(function() {... }, period). You could play around with the period to see how well this works.

javascript event

I have an interesting question, i hope..I have a textarea in my form..when a user comes to enter values in it it displays some cached values in an autocomplete format..thats fine..I want to call an ajax function after the user selects such a cached value in it..so that the ajax call should pass this selected value..so my question is on which can i get the final selected value, so i call ajax at that time,... i tried with onblur etc, but not worked..
help please..
thanks in advance...
If the user chooses by clicking, you want a 'click' handler on the element the user is selecting (or a containing element).
If the user can select in other ways, eg by the keyboard, then you'll need to observe other events as well.
You mean you want to detect if the user selects a value the browser's native Autocomplete lookup, instead of typing it in themselves?
I'm certain there is no event to catch this.
The only workaround that comes to mind is analyzing the keypress events the user makes in the input field. If the keys entered do not match the full string that is in the text field, and no onpaste event was fired, it stands to reason that the value was selected from an Autocomplete.
This is going to be tough to implement, though, and by no means 100% reliable.
As Pekka said above, there will likely be browser-specific events to handle for this kind of functionality, but it is possible.
For IE, check out Why does the javascript onchange event not fire if autocomplete is on? for a reference to the "onpropertychange" event within IE.
For Firefox, it looks like others have solved it through a combination of onBlur and onFocus (see FireFox capture autocomplete input change event).
If you do come up with a cross-browser solution, please let us know!

How can a javascript function be fired when a user types text into an input field or pastes text into it?

$(document).ready(function() {
$("input[id^='question']").live('keyup',function(ev){
id=this.id.substr(8);
if (ajaxCallTimeoutID != null)
clearTimeout(ajaxCallTimeoutID);
ajaxCallTimeoutID = setTimeout(function(){subjectivecheck(id)}, 1000);
});
});
There is a problem. When a user pastes text into an input field, the function above can not be fired. How to solve this problem?
The onchange event is what you want here. It fires when the textbox loses focus (blur) and has had its value changed since it received focus. It takes care of the paste problem.
So instead of .live('keyup', use live('change'.
This is as good as it gets, without using some ridiculous interval polling. And just for the purpose of context, be aware that any user can disable Javascript in the browser whenever they feel like it.
The Paste (onpaste) event is not standard - it is AFAIK supported only in Internet Explorer (see: http://msdn.microsoft.com/en-us/library/ms536955(VS.85).aspx)
The change (onchange handlder) event is standard - but that will only fire if the value of the textbox changed in the time between gaining and losing focus - i.o.w. detecting change requires the textbox to lose focus.
What you could do, is use setInterval() (http://www.w3schools.com/jsref/met_win_setinterval.asp) to poll the value of the textbox, and compare it with the previous value.
At the onfocus event on the field, you can start a timer to check if the field value has changed.
And at onblur, clear that timer.
The paste with ctrl+v is ok with onkeyup, but not with the mouse right click or with a browser undo.
That's not the only problem. Even if you could catch cut and paste reliably on all browsers, which you can't, there are still more ways of putting content in a form field. For example on some platforms dragging a file to an input will put the pathname in, with no event for you to catch. Or a user might do right-click-Undo to change the contents. Or Delete. Or select some text from the input or another input and drag-and-drop it in. And probably many more I haven't thought of.
If you want to be informed of all changes to a form field more quickly than onchange, I'm afraid there is no alternative but to constantly monitor the value of the element in a polling setInterval.

Categories

Resources