My question is similar to this or this question.
However all the answers there use jQuery's val function to copy the value between the fields.
I cannot use val since the source input field will be readonly.
Therefore I want to capture the keyboard events on a source input field and based on these populate a target text field. Can it be done?
I was hoping something like this would do it, but it doesn't work.
$(".src").keyup(function(e){
$(".target").trigger(e);
});
Any ideas?
Your question doesn't make much sense. You say:
the source input field will be readonly and thus will only be able to listen to keyboard events.
... but that doens't make much sense. If it's readonly, you cannot focus the field... meaning you cannot give it keyboard events. Regardless, you can always get and set the value of a field, even if it's readonly or disabled. If you don't want to use jQuery's val() - then use plain JS.
$(".src").keyup(function(e){
document.getElementsByClassName('target')[0].value = e.target.value;
});
Update: Now I think I understand your question. Your main goal is that you want to modify the color of the caret by hiding the focused field and writing to another field. Not sure why you want to do this as I assure you your users don't care and you run the risk of interfering with the users experience... and as I type this message I don't even notice the color of the caret in Chrome... buuuut, I have a feeling that you still think that your inputs are more special than others. I feel for your users who try and put the cursor at an earlier point in the input to fix a typo... I digress.
Instead of 2 inputs, create a single input, set it's opacity to 0, and write the entire value to a DIV whenever it changes. This has many benefits:
You get many of the default behaviors of the input without actually needing to see it (eg. cursor on hover on desktop, keyboard navigation, etc).
Your form can still do a vanilla submit without needing to copy values or any other javascript weirdness.
Any other code, validation scripts, etc don't need to change - the input is still getting a value and emitting all events.
https://jsfiddle.net/2sp92bpy/1/
Related
I am trying to capture changes to a text area and decipher what changes were made to the text.
I am doing this to somewhat copy the behavior of a 'tag-able' editor such as the one on Facebook - where you can 'tag' your friend or a public page.
My plan is to track the indexes of 'tagged words' in the string input (with some object containing data about the placement of the 'tagged words'). So this means that whenever a word/phrase is typed/pasted into the textarea, I want to know exactly what changed in the text to update the indexes of the 'tagged words'.
I ran into an event that seems to fit my need:
textAreaEl.bind("input", function (e) {});
To proceed with this, I want to be able to figure out what exactly changed in the text to trigger this event .. from the 'e' object.
Is there a way to decipher what actually happened to the text before and after this event triggered? I took a stab at it, but came up empty. (e.which was even undefined after I entered something from the keyboard).
Also, is there a better way of tracking a string of characters in a larger string?
You can find the position (indexed at 0) of a string inside of another string using string.indexOf().
To find the complete text input of a text area or input, use element.value.
To detect when a textarea is modified, you can play around with addEventListener.
If you want to modify the contents of the textarea by changing coloration etc of its contents, that's much more difficult and I would even recommend using a div element with contenteditable instead.
Some references:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Edit: Read your question a bit more slowly, and seems like what you're doing is you're trying to see if you can detect what changes were made. However, the purpose of this seems like you want to see what tags were added, and therefore this becomes a x/y misconception.
You don't need to exactly check what changes were made, all you need to do is check the input again every time they press a new key (or even only check for the # key). To explicitly find the difference between before and after is not needed.
Scenario:
I have an web app where I need to capture all keyed input to the page in a central location. My first solution was to continually give focus to a text box so all focus would go through there. That works amazingly for desktop browsers, but causes the undesirable effect of causing the soft keyboard on mobile browsers to always be visible. Since my keyed input is coming from an external source, I don't want the keyboard visible until I request it. Since there's no direct way (that I've found) to do this, I was trying to give constant focus to a control that doesn't cause the keyboard to show. I was unable to find a control that didn't cause the keyboard to show, but would fire one of the key events (keydown/keyup/keypress).
Does anyone have a suggestion as to how I can catch all keyed input without displaying the soft keyboard?
Note: I can have a different solution for desktop and mobile if necessary.
Any help is appreciated!
Ok, so the answer was so simple, I can't believe it took me so long to get to it.
If you make a textbox readonly, it doesn't show the keyboard, but still fires key events. This allowed me to accept input from the external source without showing the keyboard. I also added a keyboard toggle button that simply hid the readonly textbox and showed the regular one.
If my application would have been different, I could have just added and removed the readonly attribute and applied focus again to have the same effect.
Thanks for all replies, including the ones that got deleted.
var keyedinput = "";
window.addEventListener('keydown', function(event){keyedinput += String.fromCharCode(event.keyCode)}, false);
keyedinput will contain the contents of the keyed input from the external keyboard-like device. Simply reference it as a global variable when needed. If there is an enter/esc key or and "end" key (sequence?) you can just check the corresponding keyCode to launch an action with the contents of the variable instead of appending to it.
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.
I have a form which I want to use both as a report view and a form. Initially the text inputs (text and textarea) are styled to have no border / background. I also use the following jQuery code to make sure they will reject focus:
$('input[type="text"], textarea').focus(function() {
$(this).blur();
});
This works in Firefox, but it doesn't in Opera (and maybe other webkit browsers). I don't want to use disabled property because then I cannot style the input to be unobtrusive (in the general sense). I can hide the input and display a span or div in its place where the state is view and then swap the visible-hidden property when state changes to form, in fact I'm doing this for selects, radio buttons, and checkboxes. But it'd be less work if I can get it work as is. Any suggestions?
Edit - Removed webkit tag, thank you Fylke.
Why not just use the "readonly" attribute instead of "disabled"? Setting "readonly" to true will not change the way the fields look (meaning that you can do that with CSS), but it prevents modification.
That said, this approach to re-using layout can be problematic when your field values take up more room than allocated on the layout. When they're editable text fields, users generally understand that they can scroll the value around, but that becomes pretty weird when the fields don't look like fields.
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!