C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

リアルタイムプレビューhtmlエディターで予測変換機能を作り

[トピック内 1 記事 (1 - 1 表示)]  << 0 >>

■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について検索してみた。(ただし見つからず…)

ご回答、よろしくお願いします。
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ