1

I have shared code in HTML. I want the feature in LWC. Please run the code and check.

    <!DOCTYPE html>
<html>
<body>
<p>Click the input field to select the contents of the text field.</p>
Name: <input type="text" id="myText" name="myText" value="Mickey" onclick="myFunction()">


<script>
function myFunction() {
  document.getElementById("myText").select();
}
</script>

</body>
</html>

You can also check the above code from the link. Click on the link and RUN https://www.w3schools.com/code/tryit.asp?filename=GGCN736KKCJJ

My LWC Code

    <lightning-input class="slds-inputNo-fld" value={ActualYield}
                                                        variant='label-hidden' data-policyid={PolicyId}
                                                        type="number" min="0" max="9999"
                                                        step="0.01" onclick={handleClickActualYield}></lightning-input>

handleClickActualYield(event){
        console.log(event.target) ;
        event.target.select();
        console.log(event.detail) ;
    }
Improve this question

2 Answers 2

Reset to default
1

Hello and welcome to SF Stack Exchange!

I have created a LWC out of the code you have shared. Please take a look at this playground.

In case the playground disappears I am sharing the code here.

HTML:

<template>
    <p>Click the input field to select the contents of the text field.</p>
Name: <input type="text" id="myText" name="myText" value="Mickey" onclick={myFunction}>

JS:

myFunction(evt) {
    evt.target.select();
}
</template>

EDIT Updating my answer below since OP shared he is attempting to achieve the above using LWC's lightning-input.

According to the documentation for lightning-input the supported methods as of today are:

  • blur
  • checkValidity
  • focus
  • reportValidity
  • setCustomValidity
  • showHelpMessageIfInvalid

As you can see there's no select method. The select() is specific to textarea and input fields.

The HTMLInputElement.select() method selects all the text in a textarea element or in an input element that includes a text field.

Source.

When you trigger an onclick event for the lightning-input you are not triggering it on the input element you see on your screen because that <input /> is wrapped in the lightning-input. In other words the evt.target is the <lightning-input></lightning-input> itself which does not support a select() method since it's a custom component. Additionally console.log(evt.target.querySelector('input')); returns null so there's no way to traverse down to the input child and trigger the select() method on it.

In order to achieve what you are asking for you will have to use a standard html input element.

Improve this answer
9
  • Thanks for your response but it's now working. It's showing that [e.target.select is not a function]
    – Arunangshu Pal
    Commented Jul 2, 2020 at 8:18
  • @ArunangshuPal Are you saying that it is now working or that it is not working?
    – Arthlete
    Commented Jul 2, 2020 at 8:21
  • It's not working. Showing an error that [e.target.select is not a function]
    – Arunangshu Pal
    Commented Jul 2, 2020 at 8:25
  • Can you post your code in your question so I can look at it?
    – Arthlete
    Commented Jul 2, 2020 at 8:32
  • 1
    Thanks a lot for your help.
    – Arunangshu Pal
    Commented Jul 2, 2020 at 11:13
0

As per select() and setSelectionRange() both are not being supported via lighting-input. we can set select index as selectionStart and selectionEnd for solution.

JS:
myFunction(event) {
   event.target.selectionStart = 0 ;
   if(event.target.value){
      event.target.selectionEnd = event.target.value.toString().length ;
   }else{
      event.target.selectionEnd = 0 ;
   }
}
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .