Ne pas autoriser les espaces tapés ou collés dans une entrée de texte et conserver la même position pour le texte et le curseur.

Question

Ne pas autoriser les espaces tapés ou collés dans une entrée de texte et conserver la même position pour le texte et le curseur.

Demandé el 2 de Octobre, 2012: Quand la question a-t-elle été
3479 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai une entrée de texte dans laquelle je ne veux pas d'espaces. Si quelqu'un tape un espace ou colle un texte avec un espace, j'aimerais que le texte redevienne ce qu'il était avant l'entrée de l'espace ET que la position du curseur reste la même. Il y a peut-être un moyen plus simple de faire cela, mais je n'y arrive pas.

Voici ce que j'ai pour l'instant :

<html><head><title>Test</title></head><body>

<input type=text id="inputText" value="testValue" onInput=doIt(this);>

</body></html>

Et le javascript à inclure (j'ai utilisé jsFiddle) :

var editedValue = "testValue";

// alert(editedValue);

function doIt(that)
{

var caretPos = that.selectionStart;

if (that.value.indexOf(" ") != -1)
{
that.value = editedValue;
// alert(caretPos);
that.selectionStart = caretPos;
}
else
{
editedValue = that.value;
}

}

Tout semble fonctionner, sauf que si le curseur se trouve au milieu du texte et que vous tapez ou collez des espaces, le curseur ne revient pas à sa position d'origine.

Quelqu'un peut-il m'aider à résoudre ce problème ? Ou me montrer un moyen entièrement nouveau/facile/simple de ne pas autoriser les espaces tapés ou collés dans une entrée de texte ?

Voici le jsfiddle avec lequel j'ai essayé de le faire, si cela peut aider : http://jsfiddle.net/djSnL/4/

Demandé el 2 de Octobre, 2012 par theMaxx

Answer 1

2 Réponses

Answer 2

2voto

Shmiddty Points 8538

http://jsfiddle.net/djSnL/5/

Vous voulez capturer le onkeydown événement :

function doIt(e)
{
    var e = e || event;

    if (e.keyCode == 32) return false; // 32 is the keycode for the spacebar

}

window.onload = function(){
    var inp = document.getElementById("inputText");

    inp.onkeydown = doIt;
};

Notez qu'ils pourront toujours coller des espaces dans l'entrée, vous devrez donc gérer cela également.

Pour gérer le collage, c'est très simple : http://jsfiddle.net/djSnL/7/

function pasteIt(e)
{
    var e = e || event;

    this.value = this.value.replace(/\s/g,'');

}

Avec les deux, vous obtiendrez l'effet désiré.

Je ne suis pas sûr à 100 %, mais je crois que seuls les navigateurs webkit vous permettent de savoir quelles sont les données avant qu'elles ne soient collées : http://jsfiddle.net/djSnL/8/

function pasteIt(e)
{
    var e = e || event;
    var data = e.clipboardData.getData("text/plain");

    if (data.match(/\s/g)) return false;    
}

Répondu el 2 de Octobre, 2012 par Shmiddty (8538 Points )

Answer 3

1voto

theMaxx Points 551

Ok, je pense que j'ai réussi, en utilisant jQuery. Merci pour votre aide !

// Lier les événements

function bindEvents()
{
$(inputText).bind('keydown paste', checkForSpaces);
}

// Vérifier les espaces

function checkForSpaces()
{
if (event.type == "keydown" && event.which == 32) {return false;}
if (event.type == "paste" && event.clipboardData.getData('text/plain').indexOf(" ") != -1) {return false;}
}

Répondu el 2 de Octobre, 2012 par theMaxx (551 Points )

Ne pas autoriser les espaces tapés ou collés dans une entrée de texte et conserver la même position pour le texte et le curseur.

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Ne pas autoriser les espaces tapés ou collés dans une entrée de texte et conserver la même position pour le texte et le curseur.

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: