勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

リアルタイムプレビュー時の改行とテーブルの上部揃え

      2014/07/03

■サンプル
http://sample.taitan916.info/preview/

■ソース
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$('#preview').bind('keyup change', function(){
var text_a = $("#preview").val()
var text_a = text_a.replace(/(\n|\r)/g, "<br>"); //改行を<br>に変換
$('#preview_area').html(text_a);
});
});
</script>
</head>
<body>
<table>
<tr>
<td valign="top">
<form action="./index.php" method="post">
<textarea id="preview" style="width:200px; height:100px;"></textarea>
</form>
</td>
<td style="border:1px solid; width:200px; height:100px;" id="preview_area">
</td>
</tr>
</table>
</body>
</html>

正規表現参考サイト
http://www.pori2.net/js/number/12.html

/(\n|\r)/g のgをつけないと改行されたりされなかったりで
調べたところ、/gをつけることで指定した文字列すべてに
HITした文字列取得になるとのこと。

■上部揃え
http://www.newcredge.com/IT/www/html/tag/table/table-td-align-valign.html

valign="top"で上部揃え。
vertical-alignで上手いこといかなかったので、
上司に聞いたところこちらで解決。

 - jQuery

  関連記事

jquery_logo
Ajaxの負荷対策

Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...

jquery_logo
jQueryでiframe内の要素を呼び出し

jQueryでiframeで開いたbody内の内容が欲しかった。 ■jQuery ...

jquery_logo
jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...

jquery_logo
jQueryプラグインの作成

面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...

jquery_logo
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。 簡単に使える ...

jquery_logo
jQueryのプラグインでカラーコードを視覚的に選択

カラーコードを入力するフォームがあって、HTMLやCSSの知識がない方のために、 ...

jquery_logo
日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

jquery_logo
Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...

110126-HTML5_Logo
formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

jquery_logo
jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...