VueJS - Echapper des caractères d'un input

Par KevinTss, il y a 7 ans

Javascript

Bonjour à tous,

Ce que je souhaiterais mettre en place, est un input de recherche de type text. Mais je voudrais controller et empêcher d'entrer certains caractères, comme les parenthèses ou autre caractères spécieaux.

Quelqu'un a une idée de la procédure à opérer ?

Ce que j'imagine est de faire un watcher sur ma data en v-model de l'input en question, mais je trouve ce process très compliqué pour pas grand chose.

Je vous remercie d'avance pour vos pistes et autres.

Kev

4 réponses

Lartak, il y a 7 ans

Bonsoir.
Pourquoi ne pas tout simplement utiliser l'attribut pattern et y définir la regex autorisée ?

Pandazaur, il y a 7 ans

Salut, voici une solution qui pourrait t'aider:

<template> <div id="app"> <input type="text" v-model="myInput"> </div> </template> <script> new Vue({ el: '#app', data () { return { unespacedInput: '' // Cette data sera ton texte sans parenthèse } }, computed: { myInput: { get () { return this.unespacedInput }, set (input) { this.unespacedInput = input.replace(/*ta regex pour enlever les caractères*/, '') } } } }) </script>

Et je te renvoie vers la documentation pour comprendre le principe des mutation avec les computed: [https://fr.vuejs.org/v2/guide/computed.html#Mutateur-calcule]()

darkiron, il y a 7 ans

Bonjour, c'est une solution bien complexe et inutile. Il serais plus judicieux d'indiquer à l'utilisateur que ce qu'il a entrer n'est pas de la forme attendus.

<template> <label for="search"> Votre recherche : <span v-if="error" class="is-error">Le champs contient des caractères interdits !</span> </label> <input name="search" type="text" v-model="search" @keyup="getSearch" :class="{ 'is-error': error}"> </template> <script> export default { name: 'search', data() { return { search: '', error: false } }, methods : { getSearch() { let regex = RegExp('/(/)') if(regex.test(this.search)){ this.error = true } this.error = false //on fais la recherche ... } } } </script> <style> .is-error { border: 1px solid red; border-radius: 20px; } </style>
KevinTss, il y a 7 ans

Merci à tous pour vos réponse !

J'ai ENFIN eu le temps de tester vos solutions, celle pandazur correspond mieux à ce que je recherche. Même si je peux entré le caractère et c'est seulement en entrant le charactère suivant qu'il se supprime.
Mais c'est trop ça fait le job !

Un grand merci à vous pour vos solutions respective !