Svelte：选择焦点上输入元素的文本

Question

input我想选择焦点元素的文本。我尝试使用bind:this={ref}and then ref.select()，但这似乎只有当我bind:value从input元素中删除时才有效。为什么？以及如何解决？

非常感谢！

<script lang="ts">
    import { evaluate } from 'mathjs';

    export let value: string | number = 0;
    let ref;

    function handleFocus() {
        value = value?.toString().replace('.', '').replace(',', '.');
        ref.select();
    }

    function handleBlur() {
        value = parseFloat(evaluate(value?.toString())).toLocaleString('be-NL', {
            maximumFractionDigits: 2,
            minimumFractionDigits: 2
        });
    }
</script>

<input
    class="text-right"
    autocomplete="off"
    type="text"
    bind:value
    bind:this={ref}
    on:focus={handleFocus}
    on:blur={handleBlur}
/>

Answer 1

您可以在输入标记中内联执行此操作：

<input on:focus="{event => event.target.select()}">

或者将事件传递给函数并执行更多操作：

<script>
    function selectContentAndDoStuff (event) {
        console.log("event: ", event);
        event.target.select();
        console.log("do more stuff here")
    }
</script>

<input on:focus="{event => selectContentAndDoStuff(event)}">