タグ別アーカイブ: javascript

InnerHTMLの罠

CATEGORIES SmartBrain, 北海道ラボby.a.takeuchi1 Comments2010.02.25

はじめまして.北海道研究所の研究員松村です.

開発していく中で,JavaScriptのinnerHTMLが特定の状況下でうまくうごかない状況にぶつかりましたので,ご参考までに紹介させていただきます.
innerHTMLは任意の箇所を,動的にゴッソリ書き換えることができるため,非常に便利なコマンドです.

以下のソースコードは,「チェンジ」ボタンを押すと,divタグで囲まれた部分をそのままtextareaに転記するというものです.

<html>
<head>
<script>
<!–
function copyTextarea(){
var inputText = document.getElementById (“before”).innerHTML;
document.getElementById (“after”).innerHTML = inputText;
}
–>
</script>
<title>サンプル</title>
</head>
<body>
<div>
eラーニングツール SmartBrain<br>
20ユーザまで無料!!<br>
お試しください!!
</div>
<hr>
<input value=”チェンジ”>
<hr>
<textarea style=”width:300px;height:100px;”>
SmartBrain,20ユーザまで無料!!
</textarea>
</body>
</html>

しかしながら,このコード,IEにおいてはエラーが生じて動きません.
どうやら,IEにおいてはinnerHTMLにタグを含めるのは禁止されているようです.
では,同じ動作を得るために......と,今度はdivタグ内の<br>タグを改行コード(\n)に置換して実行してみます.

しかしながら,今度は改行コードが空白として扱われてしまいました.
どうやら,IEにおいてはinnerHTMLでの改行は空白に置き換えられてしまうようです.

いずれの現象も「ブラウザはIE」「innerHTMLを用いる」という条件で発生します.
それでは,これら2つの状況を回避するためにはどうすればよいのでしょうか.

答えは「innerHTMLで書き換えるのではなく,textareaのvalueを書き換える」です.

×:document.getElementById (“after”).innerHTML = inputText;
○:document.getElementById (“after”).value = inputText;

これで改行込みで動的に書き換えられるようになります.
innerHTMLは便利なので何かと頼りがちですが,思わぬところに伏兵がいるものです......

参考にしたURLはコチラ

-OASIS- – 今日のメモ「innerHTMLの改行コードの扱い(JavaScript)
http://pochi.orz.ne.jp/oasis/archive_198.htm

JQueryで外部へのリンクにtarget=_blankを指定という記事を昨夜投稿したのですが、Wordpressのプラグインに加工して欲しいとのお問い合わせを多数いただきましたので、さっそく作成致しました。はてなブックマークで「location.hostnameを使ったほうが簡潔に記述できる」と、ご指摘いただいた点を反映しております。ご指摘いただきありがとうございました。HTML自体を書き換えずにDOM上での変更だけでYahooの申請が通るかどうかという疑問もありますが、一旦このプラグインを組み込みYahooのカテゴリ登録に通るか試してみようと思います。

プラグイン: external_link_rewriter.zip

テストリンク(ドメイン外): http://www.google.co.jp
テストリンク(ドメイン内): http://blog.elearning.co.jp

ソースコード

<?php
/*
Plugin Name: external_link_rewriter
Plugin URI: http://blog.elearning.co.jp/
Description: Modify target attributes of A-tags that link to external addresses
Author: Yoichiro Nishimura
Version: 1
Author URI: http://elearning.co.jp/
*/

function external_link_rewriter() {
echo <<<EOT
<script src=”http://www.google.com/jsapi”></script>
<script>
if(typeof jQuery === “undefined”)google.load(“jquery”, “1.3.2”);
</script>
<script>
$(document).ready( function () {
$(‘a[href^=http]’).not(‘[href*=”‘+location.hostname+'”]’).attr(‘target’,’_blank’);
})
</script>
EOT;
}
add_action(‘wp_head’, ‘external_link_rewriter’);
?>

WordPress以外に設置される場合は、以下のソースコードをとの間に挿入すると動作します。

<script src=”http://www.google.com/jsapi”></script>
<script>
if(typeof jQuery === “undefined”)google.load(“jquery”, “1.3.2”);
</script>
<script>
$(document).ready( function () {
$(‘a[href^=http]’).not(‘[href*=”‘+location.hostname+'”]’).attr(‘target’,’_blank’);
})
</script>

入力フォーム(Textarea)のサイズ

CATEGORIES eラーニングby.a.takeuchi0 Comments2009.11.25

Webアプリを作成していて、Textareaのサイズに悩んだこと、ありますよね?小さすぎると入力しにくいし、大き過ぎると狭い画面を使っている人に不親切。幅は、固定値でもよいですが、高さは内容に応じて変化するといいですよね。ということで、入力内容によって高さが変化するTextareaを作ってみました。

固定サイズのtextareaの例

可変サイズのtextareaの例

ソースコード

<script language="JavaScript" src="http://10000.bz/lms/js/jquery-latest.js"></script>
<script language="JavaScript" src="http://10000.bz/lms/js/jquery.autogrow.js"></script>
<script type="text/javascript">
$(function() {
$(‘textarea.auto_resize’).autogrow();
});
</script>

<strong>固定サイズのtextareaの例</strong>
<textarea style="width: 300px; height: 40px;">略</textarea>

<strong>可変サイズのtextareaの例</strong>
<textarea class="auto_resize" style="width: 300px; height: 40px;">略</textarea>

本記事で利用しているプラグインがInternetExplorerで動作しないという事が分かりました。JavaScriptエラーも発生しているためスクリプトを無効化しました。既に、別の解決方法を見つけているのですが、夜も遅いので、明日改めて記事をまとさせていただきます。

2009年11月22日にリリースした、弊社が自信をもってお勧めする最新LMS(学習管理システム)のSmartBrainにも、さきほど上記のタイプのtextareaを導入しました。下記のボタンをクリックして、是非SmartBrainをお試しください。(現時点では、完全無料のベータ運用となっております。)



start

PPT2Flash ProfessionalQuizCreatorで作成したeラーニング教材を、eラーニングシステムを使わずに、一定期間だけ配布したいとの要望をいただきました。eラーニングシステムを是非購入してくださいと、言いたいところですが、下記のような方法を考えてみました。

下記のJavaScriptは、下記のサイトで配布されたものを改変したものです。JavaScriptをHTML内に埋め込みすることができるなら、この方法で期間を決めて表示することが可能です。(この方法は、いろんな意味で抜け穴があります。)厳密に配布を行う場合は、eLearning Manager 4Uなど、eラーニングシステムを利用することを推奨いたします。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/*****************************************************/
//指定期間中に画像やメッセージを
//表示させるJavascript
/**設定項目 ******************************************/

//----開始日 YYYY/M/D 形式 半角数字で開始日指定
myStartDate="2009/11/01";

// 終了日 YYYY/M/D 形式 半角数字で終了日指定 11日指定で10日24時まで表示。
myEndDate="2009/11/11";

//表示するHTML
myHTML="&lt;a href=http:/www.xxx.co.jp/xxx/&gt;○○○の教材(11月1日~11月10日)&lt;/a&gt;";

/*説明:上記の場合、2009/11/1~2009/11/10の
期間、指定メッセージを表示します。
1900年以前、2000年問題は必要なかろうと全然考慮していませんので、
開始日・終了日は2000年以降を指定してください。
終了日=終了日まで表示しているのではなくて、
表示しなくなる日です。
/******************************************************************/

myDate=new Date(); //現在の日付取得
mySD=new Date(myStartDate);
myED=new Date(myEndDate);
if(myDate.getTime()-mySD.getTime()&gt; 0 &amp;&amp; myED.getTime()-myDate.getTime()&gt; 0){
document.write(myHTML);
}

お正月に便利な期間指定自動表示JavaScript:【無料素材倶楽部】WEBデザインブログ
http://sozai.7gates.net/blog/docs/%E6%9C%9F%E9%96%93%E6%8C%87%E5%AE%9A%E8%87%AA%E5%8B%95%E8%A1%A8%E7%A4%BAJavaScript/
を改変したものです。

使用法
1:上記ソースをテキストエディタにコピぺして、適当な名前をつけて、拡張子、.jsで保存。(例:newyear.js 等)
2:WEBページのHTML内でご挨拶を表示したい場所に、下記の一部を記入すれば完成です。
<script type=”text/javascript” src=”ファイルまでのパス/あなたのつけた名前.js”></script>

  • 製品・サービス
    PC、iPhone対応のeラーニングシステム。20名まで無料でASPサービスを利用できます
    PC、iPhone対応のeラーニング学習管理システム(LMS)【SmartBrain】
    http://smartbrain.info/
    PC、iPhone対応のeラーニングシステム。ユーザ数無制限のASPコースをご用意。


    eラーニングポータルサイト【elearning.co.jp】
    http://elearning.co.jp/
    eラーニング専門企業(株)キバンインターナショナルの製品を紹介しています。


    コンテンツビジネス支援パック
    http://contentsbank.jp/

    Ustream配信、動画コンテンツ制作、セミナーにご利用いただけるレンタルスタジオ
    Ustreamレンタルスタジオ「パンダスタジオ」
    http://pandastudio.tv/

    eラーニング専門企業(株)キバンインターナショナルのスタッフが、eラーニングに関する情報・最新事情をBlogでご紹介。月50本程度の情報発信を行っています。
    ブログ「blog.eラーニング.co.jp」
    http://blog.elearning.co.jp/

  • アーカイブ
  • カテゴリー
  • Amazon
  • タグ