Skip to main content

change

Description​

fires on change of the value of an input, i.e. on the HTML input event

Parameters​

  • ev - (object) a CustomEvent object. Its detail property contains:
    • value - (string) the value of the input
    • input - (boolean) true, if a text is being typed (check details)

Example​

<script>
    function handleChange(ev){
        const text = ev.detail.value;
        console.log(text);
        // => {"the typed text"}
    }
</script>

<Text placeholder="Type here" on:change={handleChange}/>

Details​

The handler function receives an object with the text typed in the input. The received object may also contain input:true, depending on the fired HTML input event:

  • if the input event of the HTML input is caught (a text is being typed), the change event of the Text control will have input:true in ev.detail
  • if the change event of the HTML input is caught (a user has applied changes), the change event of the Text control won't have the input property in ev.detail

Related article: Catching the change of the value