0

I am trying to make a basic form using standard html inputs that only allow numbers. The input has an onkeyup event handler that filters the value and sets an internal variable if it is numeric characters.

The problem is the input is not respecting the value I am setting and displays all keys entered.

Input:

<label>
    <span class="required">Site ID: {siteId}</span>
    <input type="text" class="text-input" onkeyup={handleSiteIdChange} value={siteId}/>
</label>

handler:

@track siteId = '';

handleSiteIdChange(event) {
    const value = event.target.value;
    if (!isNaN(value)) {
        this.siteId = event.target.value;
    }
}

Before I get suggestions to use lightning-input I am using standard inputs because I am unable to override the styling on lightning-input.

0

Figured it out by using this.template.querySelector

<label>
    <span class="required">Site ID:</span>
    <input data-id="site-id" type="text" class="text-input" oninput={handleSiteIdChange}/>
</label>
handleSiteIdChange(event) {
    const value = event.target.value;
    if (!isNaN(value)) {
        this.template.querySelector(`[data-id="site-id"]`).value = value;
        this.siteId = value;
    } else {
        this.template.querySelector(`[data-id="site-id"]`).value = this.siteId;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.