| ■96916 / inTopicNo.1) |
リアルタイムプレビューhtmlエディターで予測変換機能を作り |
□投稿者/ javascript入門者 (1回)-(2021/03/02(Tue) 12:24:11)
|
分類:[JavaScript]
使用言語・html css javascript
実現したいこと
リアルタイムでプレビューされるhtmlエディターを作りたいと思っています。
プレビューするだけならば作ることができたのですが、さらにアレンジを加えたいです。
アレンジの詳細
・<h1>を入力しようとしたとき、<h まで入力するだけで予測変換ができるようにしたい。
・スペースキーを押すとhtmlの属性（styleやclassなど）の予測変換を出したい。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>htmlエディタ</title>
<script>
$(function() {
$('body').keyup(function() {
$('#preview').html($('#src').val());
});
});
</script>
</head>
<body>
<p>以下に記入</p>
<textarea id="src" rows="10" cols="80">
ここにコードを記入する
</textarea>
<hr>
<div id="preview"></div>
</body>
</html>
試したこと
キー入力に関連したjavascriptについて検索してみた。（ただし見つからず…）
ご回答、よろしくお願いします。
|
|