Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #100916
    Tr12
    Member
    Up
    0
    Down

    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

    #100918
    Hristofor
    Member
    Up
    0
    Down

    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

    #100920
    Tr12
    Member
    Up
    0
    Down

    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
     

    #100922
    admin
    Keymaster
    Up
    0
    Down

    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

    #100925
    Tr12
    Member
    Up
    0
    Down

    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

    #100926
    admin
    Keymaster
    Up
    0
    Down

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.