1
votes

Comment se concentrer sur le champ d'entrée chargé à partir du composant dans Svelte?

Après avoir chargé le composant qui contient des entrées. Comment puis-je me concentrer sur ce champ particulier?

TextField.svelte

<script>
  import TextField from './TextField'
  import {onMount} from 'svete'

  onMount(() => {
    // This line is funny.. I know
    document.querySelector('[name="firstname"]').focus()
  })

</script>

<TextField label="First Name" name="firstname" />

App.svelte p >

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} >
  <slot></slot>
</div>

input svelte autofocus

1 commentaires

Ma question contient des fautes de frappe. Voir la réponse ci-dessous pour référence.

3 Réponses :

1
votes

Vous pouvez utiliser l'attribut autofocus .

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} autofocus > // <-- here
  <slot></slot>
</div>

Mais comme indiqué dans cette réponse , ce n'est probablement pas une bonne idée du point de vue de l'accessibilité.

1 commentaires

De nos jours, cela déclenchera un avertissement: A11y: évitez d'utiliser l'autofocussvelte (a11y-autofocus) . Donc, comme l'a déclaré le PO, ce n'est probablement pas la voie à suivre.

9
votes

Vous pouvez obtenir une référence au nœud DOM d'entrée avec bind: this et l'exporter comme accessoire et l'utiliser dans le composant parent.

Exemple

<!-- TextField.svelte -->
<script>
  export let label = '';
  export let name = '';
  export let placeholder = '';
  export let value = '';
  export let ref = null;
</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} bind:this={ref} >
  <slot></slot>
</div>

<!-- App.svelte -->
<script>
  import TextField from './TextField.svelte';
  import { onMount } from 'svelte';

  let ref;

  onMount(() => {
    ref.focus(); 
  });      
</script>

<TextField label="First Name" name="firstname" bind:ref />

1 commentaires

Avez-vous essayé ce code? ref.focus () ne semble pas fonctionner pour moi alors que je suis capable de changer d'autres propriétés d'élément en utilisant ref .

2
votes

Vous avez en fait plusieurs fautes de frappe dans App.svelte .

Tout d'abord, importez le composant.

<script>
  import TextField from './TextField.svelte';
</script>

<TextField label="First Name" name="firstname" focused/>
<TextField label="Last Name" name="lastname" focused/>

Cela devrait être:

<script>
    import { onMount } from 'svelte';

    export let focused = false;
    export let label = '';
    export let name = '';
    export let placeholder = '';
    export let value = '';

    let elm;

    onMount(function() {
        elm.focus();
    });
</script>

<div class="field">
    <label for={name}>{label}</label>
    <input {placeholder} type="text" {name} bind:value={value} bind:this={elm}/>
    <slot/>
</div>

Deuxièmement, le paquet Svelte lui-même.

import { onMount } from 'svelte';

Cela devrait être:

import {onMount} from 'svete'

1 commentaires

Ne pas modifier ma question pour les fautes de frappe stupides afin que les précieuses lignes que vous avez écrites restent pertinentes :)