onkeyupのreplace処理を使うと、入力が末尾になってしまう現象について

締切済

質問者：ぺんぎん
質問日時：2015/10/09 07:45
回答数：2件

テキスト入力フォームで、英数字のみ入力できるよう、下記のhtmlを組みました。

<input type="text" name="text" value="" onKeyup="this.value=this.value.replace(/[^0-9a-zA-Z]+/,'')>

Firefoxは問題なく動作していますが、ChromやSafariでは困った現象が起きました。

テキストフォームに文字列を入力し、文字列の真ん中辺りを一文字消すと、自動的に入力カーソルが文字列の末尾に移動してしまいます。

例えば、文字列"abcde"と入力し、入力カーソルを"c"と"d"の間に移動して、Backspaceキーで一文字削除すると、文字列は"abde"となりますが、入力カーソルは自動的に"e"の後ろに移動します。

入力カーソルが自動的に移動してしまっては、続けて２文字、３文字と削除したいときに、とても不便です。

キーボードを操作するごとにonkeyupのreplace処理が働いて、入力カーソルが自動的に移動しているのではと思いますが、それでは困ってしまいます。

もし、この対策や他の方法があれば教えていただけないでしょうか。

どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： yambejp
回答日時：2015/10/09 10:26

とりあえずであれば

if(this.value.match(/\W/)) this.value=this.value.replace(/\W/,'')
のような処理をすればよいような気がしますが
これでもreplaceした時点でカーソルが移動してしまいます

ちょっと複雑ですが、以下のような処理をいれると
カーソルを強制的に元の位置に戻します

<script>
try{
document.addEventListener('keyup',function(e){keyupfunc(e)},true);
}catch(e){
document.attachEvent('onkeyup',function(e){keyupfunc(e)});
}
function keyupfunc(e){
var t = (e.srcElement || e.target);
var v=t.value;
var r = new RegExp("\\W");
if(t.nodeName!="INPUT" || t.type!="text" || t.name!="text") return true;
if(window.getSelection){
window.getSelection();
var p = t.selectionStart;
if(v.match(r)){
t.value=v.replace(r,"");
t.setSelectionRange(p-1,p-1);
}
}else{
//IE対策
var range = document.selection.createRange();
range.moveStart("character", - v.length );
var p = range.text.length;
if(v.match(r)){
t.value=v.replace(r,"");
range.collapse();
range.moveEnd("character",p -1);
range.moveStart("character",p -1);
range.select();
}
}
}
</script>

<input type="text" name="text" value="">