下記のコードは、PCキーボード操作で[alt]+[z]キーで、inputフォームにある文字列のカーソルがある部分に、文字列(Hello!)を挿入するコードを書きました。例えば、inputフォームにある文字列のaaaa|aaaaaaaaa で 5番目にカーソル( |)があるときに、[alt]+[z]キーを押すと、aaaaHello!aaaa| となります。挿入に関しては、問題ありませんが、挿入し終えた後には、カーソルが文字列の最後に移動してしまいます。これを挿入後は、挿入した文字列の後ろにくるようにしたいのですが、どのうよにすればよいでしょうか? (このように⇒ aaaaHello!|aaaa) document.addEventListener("keydown", function(e){ if(e.altKey == true && e.keyCode == 90){ if(e.target.nodeName == "INPUT" && e.target.type == "text"){ var sentence = e.target.value; var len = sentence.length; var pos = e.target.selectionStart; var before = sentence.substr(0, pos); var word = 'Hello!'; var after = sentence.substr(pos, len); sentence = before + word + after; e.target.value = sentence; } } }, false);

マジレス希望

フォームにある文字列上のカーソル位置の変更

解決済

質問者：PlanetSD
質問日時：2017/11/17 21:51
回答数：1件

下記のコードは、PCキーボード操作で[alt]+[z]キーで、inputフォームにある文字列のカーソルがある部分に、文字列(Hello!)を挿入するコードを書きました。例えば、inputフォームにある文字列のaaaa|aaaaaaaaa で 5番目にカーソル( |)があるときに、[alt]+[z]キーを押すと、aaaaHello!aaaa| となります。挿入に関しては、問題ありませんが、挿入し終えた後には、カーソルが文字列の最後に移動してしまいます。これを挿入後は、挿入した文字列の後ろにくるようにしたいのですが、どのうよにすればよいでしょうか? 　(このように⇒ aaaaHello!|aaaa)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
<script>

document.addEventListener("keydown", function(e){

if(e.altKey == true && e.keyCode == 90){
if(e.target.nodeName == "INPUT" && e.target.type == "text"){

var sentence = e.target.value;
var len = sentence.length;
var pos = e.target.selectionStart;
var before = sentence.substr(0, pos);
var word = 'Hello!';
var after = sentence.substr(pos, len);
sentence = before + word + after;
e.target.value = sentence;

}
}

}, false);
</script>
</head>
<body >
<input type="text" name="" value="aaaaaaaaaaaaaaaaaaaa"><br>
</body>
</html>