Allow to select text on readonly input

Tagged: angular drop down, angular input, fast input, react drop down input, react input. drop down, reaonly input, smart input

This topic has 5 replies, 3 voices, and was last updated 4 years, 4 months ago by admin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
July 14, 2020 at 9:40 am #100916
Tr12
Member
Hi, I want to create a readonly input field, but allow the user to select+copy text in it (like it’s possible is in a regular HTML select element).
However, when I use the following HTML, then you cannot select the text in the input:
```
<smart-input readonly value="123" />
```
See also this code pen link: https://codepen.io/KP-Traeger12/pen/PoZdwBo
Thank you
July 14, 2020 at 11:08 am #100918

Hristofor
Member

Hi Tr12,
the Smart.Input is a very flexible component and it’s readonly state doesn’t simply disable text input. As it says in the official documentation for the element, when readonly is set the Smart.Input acts as a drop down list. As such it doesn’t allow text selection. We will add a work item for this missing functionality.
As a workaround if you begin the text selection outside the element and drag over it the text inside the Smart.Input will be selected.
However i suggest you use the Smart.TextBox component with readonly because it acts as an HTML input but has a lot more functionality.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

July 14, 2020 at 12:55 pm #100920

Tr12
Member

Hi Peter,
thank you for your help. As a workaround, I set the “readonly” attribute on the inner “input” element instead of the smart-input:
$("input", smartInput).attr("readonly", "");

Unfortunately, I cannot use the Smart.TextBox component, because it seems to be very slow to create. When I create 30 text boxes (for a form), they need about 500-600 ms to create (in Chrome), which is way too much. See this code pen link: https://codepen.io/KP-Traeger12/pen/abdadYY
When you change Smart.TextBox to Smart.Input, it only needs ~60 ms (1/10 of the time).
I also noticed an issue with Smart.Input, that when getting the current value by calling .value, it does not always return the current value, but the value from about 0.5 seconds ago. Instead, I have to get the value from the underlying “input” element, similar to setting the “readonly” attribute.
Thank you

July 14, 2020 at 3:22 pm #100922
admin
Keymaster
Hi Tr12,
Actually, the previous was answered by my colleague. Anyway, you can call him Peter, too 🙂
When you add multiple HTML Elements, it would be better to add them just once in the DOM.
```
    const doc = document.createDocumentFragment();
            for(let z = 0; z < 30; z++) {
                let text = new window.Smart.TextBox();
                text.value = "abc";
                doc.appendChild(text);
            }
  document.body.appendChild(doc);
```
Best Regards,
Peter
Smart HTML Elements Team
https://www.htmlelements.com
July 15, 2020 at 8:12 am #100925

Tr12
Member

I’m sorry – thank you for your help, Christopher!
Hi Peter,
thanks for the hint about using document fragment. However, I tried it, but it doesn’t seem to make a noticeable difference – it still needs about 500 ms to create the 30 text boxes. You can see the code pen example here: https://codepen.io/KP-Traeger12/pen/XWXPYVy
Thank you

July 15, 2020 at 8:26 am #100926

admin
Keymaster

Hi Tr12,
Yes, it requires about 400ms for 30 textboxes. If this is slow for you, you can use our smart-input which is similar, but with more basic features.
Best Regards,
Peter
Smart HTML Elements Team
https://www.htmlelements.com
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.