0

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?

Community
  • 1
  • 1
Genti Saliu
  • 2,643
  • 4
  • 23
  • 43
  • Another option would be to create a temporary input element above the readonly on focus so it looks like that is being changed while also being able to gather user input data. – Travis J Aug 22 '16 at 22:27
  • The reason why I am doing this is to modify the color of the caret. On iOS the caret has an unchangeable (blue) color (see [this post](http://stackoverflow.com/questions/37528011/ios-safari-input-caret-color) and [this post](http://stackoverflow.com/questions/30655753/how-to-change-default-color-of-caret-on-ios-for-inputs)), which is undesirable. If I create a temporary input element above the readonly, its caret will be visible. – Genti Saliu Aug 22 '16 at 22:31
  • I think my best bet is to concatenate the key codes to strings and account for backspace keycodes, caret position changes and so forth. Also copying/pasting text from readonly fields does not work, which is quite a deal breaker :( – Genti Saliu Aug 22 '16 at 22:41
  • 1
    Possibly of interest to you: http://stackoverflow.com/questions/596481/simulate-javascript-key-events – Jacob Aug 22 '16 at 23:40

1 Answers1

1

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:

  1. 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).
  2. Your form can still do a vanilla submit without needing to copy values or any other javascript weirdness.
  3. 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/

Ryan Wheale
  • 26,022
  • 8
  • 76
  • 96
  • Hey, thanks for the answer. Readonly fields are able to receive focus. Disabled fields are not. I want to be able to copy the value from source to target, not the other way around. It's the same issue even with plain JS. – Genti Saliu Aug 22 '16 at 22:43
  • Ah, so when readonly Input A receives focus and the user starts to type, you want to write to Input B? – Ryan Wheale Aug 22 '16 at 22:49
  • 1
    I updated my response. Sorry for being snarky - two of my iOS developer friends couldn't tell me the color of a cursor off the top of their head. They pulled up two of what they consider the best designed apps they've seen, all use the blue caret. – Ryan Wheale Aug 22 '16 at 23:28
  • +1 for the opacity idea, I hadn't thought of that and I like it. I would upvote you 10 times if I could. I will have to think about how to make text selection work reliably but it should be doable with the selection API. I will give this a try tomorrow at work and accept your answer. ;) – Genti Saliu Aug 22 '16 at 23:50
  • Our form background is blue as well so the caret in iOS is barely visible and it gives off the impression as something is not working, plus as you said, users can barely notice it when they try to fix typos. Thanks a lot! – Genti Saliu Aug 22 '16 at 23:52