Style Elements: Make calculated field focusable

Learn
1

I have a form in style-elements where some fields are generated from previous input and are therefore disabled.
I made them disabled input fields to make it easy to copy their content with Ctr+A and Ctr+C. Now this only works on Chrome, in Firefox you cannot even select them.

The workflow I want to enable is:

Enter value -> Tab -> Enter value -> Tab -> Copy result

Any Ideas how I can implement this? The computed result does not have to be an input, I just want it to be easily copiable.

Edit: Add style elements

2

I’m not 100% sure where you are aiming at but I hope this helps.

Here i made a little demo that updates the third (grey input) when it gets focus.
which is done with the Html.Events.onFocus.
Also changed to the field are ignored by not updating the field (“voided” the onInput on the third field)
I made the background color of the third input grey to give it a disabled feel (you should style it better obviously)
https://ellie-app.com/s7ZKQ9LLLa1/0

I also made a version where the field is just shown as text, which is also copyable.
https://ellie-app.com/s7ZKQ9LLLa1/1

3

Thank you for all the effort!
I am looking explicitly for a solution in style elements, but
“faking” the field that is disabled might be transferrable.
Do you know of a way to make the text focusable to copy it?
The text I am generating contains spaces so it’s not just double clicking it and I would like it to be focused on tab so it’s easy to copy via shortcut.

4

I’m not sure about style elements but i think the idea works there as well.

Another option would be to use a “copy to clipboard” library like Clipboard
I use that in one of my projects. You just load clipboard in your javascript
And then in your elm code you set some data to make it copyable
There i set the class "copyable" and the attribute attribute "data-clipboard-text" "value that needs to be copied which can have spaces"

The cool thing is that the copied content is actually in a data attribute and not necessary on screen (you off course can print it to screen as well).

I’m not sure if this is something for you but i want to point the idea so you can think about it.

1 Like