Allow to select text on readonly input

[Tr12]

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

[Hristofor]

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

[Tr12]

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
 

[admin]

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

[Tr12]

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

[admin]

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