3

スペースを入れたくないテキスト入力があります。誰かがスペースを入力したり、スペースを含むテキストを貼り付けたりした場合、テキストをスペースが入力される前の状態に戻し、キャレット位置を維持したいと思います。同じ。これを行う簡単な方法があるかもしれませんが、私はそれを理解できません。

これは私がこれまでに持っているものです:

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

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

</body></html>​

そして、含まれるJavaScript（私は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;
}

}​

キャレットがテキストの途中にあり、スペースを入力または貼り付けた場合、キャレットが元の位置に戻らないことを除いて、すべて機能しているようです。

誰でもこれを理解するのを手伝ってもらえますか? または、テキスト入力にスペースを入力または貼り付けることを許可しない、まったく新しい/より簡単/簡単な方法を教えてください。

これが役立つ場合に試していたjsfiddleです：http://jsfiddle.net/djSnL/4/

4

2 に答える 2

2

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

onkeydownイベントをキャプチャしたい：

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;
};

入力にスペースを貼り付けることができるので、それも処理する必要があることに注意してください。

貼り付けを処理するには、次のように簡単です: http://jsfiddle.net/djSnL/7/

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

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

}

両方を使用すると、目的の効果が得られます。

100% 確信があるわけではありませんが、貼り付ける前にデータが何であるかを知ることができるのは Webkit ブラウザーだけだと思います: 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;    
}
于 2012-10-02T19:57:30.523 に答える
1

わかりました、jQueryを使用して取得したと思います。助けてくれてありがとう！

// イベントをバインド

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

// スペースをチェック

function checkForSpaces()
{
if (event.type == "keydown" && event.which == 32) {return false;}
if (event.type == "paste" && event.clipboardData.getData('text/plain').indexOf(" ") != -1) {return false;}
}
于 2012-10-02T21:53:35.973 に答える