Q&A
実現したいこと
リアルタイムでプレビューされるhtmlエディターを作りたいと思っています。
プレビューするだけならば作ることができたのですが、さらにアレンジを加えたいです。
アレンジの詳細
・<h1>を入力しようとしたとき、<h まで入力するだけで予測変換ができるようにしたい。
・スペースキーを押すとhtmlの属性（styleやclassなど）の予測変換を出したい。
ソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 6<title>htmlエディタ</title> 7<script> 8$(function() { 9 $('body').keyup(function() { 10 $('#preview').html($('#src').val()); 11 }); 12}); 13</script> 14</head> 15<body> 16<p>以下に記入</p> 17<textarea id="src" rows="10" cols="80"> 18 ここにコードを記入する 19</textarea> 20<hr> 21<div id="preview"></div> 22</body> 23</html>
試したこと
キー入力に関連したjavascriptについて検索してみた。（ただし見つからず…）
ご回答、よろしくお願いします。
回答1件
0
ベストアンサー
いわゆる「サジェスチョン」と呼ばれる機能ですね。
keyupのたびに現在地から前の空白までの文字列を取得し、辞書と比較する形になるかと思います。
「今どのキーを押したか」はあまり重要視すべきではなく、「今どこで文字列の塊を打っているか」を見てください。
投稿2021/03/02 03:36
総合スコア80875
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/02 04:06