ゲームや日記を公開中。 --- a blog about games, life. my handle is 'd_of_i'.
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
昨日のリアルタイムプレビューのJavaScriptソース。
必要最低限のモノにし、コメントも付けました。



普通に話す 独り言 狼の囁き

↑これのソース↓



<script language="JavaScript"><!--

function view(){
  var ret;
  
  if(document.form.kind[0].checked){  //「普通に話す」にチェック付けてる場合

    document.form.txt.style.backgroundColor="#ffffff";
    ret='<div style="background: #fff; color: #000;">';

  }else if(document.form.kind[1].checked){  //「独り言」にチェック付けてる場合

    document.form.txt.style.backgroundColor="#777777";
    ret='<div style="background: #777; color: #000;">';

  }else{//「狼の囁き」にチェック付けてる場合

    document.form.txt.style.backgroundColor="#ff7777";
    ret='<div style="background: #f77; color: #000;">';

  }

  //テキストエリアの文字列を変換する。
  //ret+=ln2br(escape_html(chop(document.form.txt.value))); 
  ret+=ln2br(escape_html(document.form.txt.value)); //今回は文字数制限を外す。

  //タグを閉じる。
  ret+='</div>'; 
  
  //<div id="preview"></div> 
  //というidが"preview"というタグを探し、その内部のHTMLを置き換える。
  document.getElementById("preview").innerHTML=ret; 
}

//改行文字を<br/>に置き換える。
function ln2br(str){
  return str.replace(/\n/g,"<br/>");
}

//HTML的に意味のある文字をエスケープする。
function escape_html(str){
  var i,j;
  var ret = "";
  var from = "&\"<>";
  var to = ["&amp;","&quot;","&lt;","&gt;"];
  for(i = 0; i<str.length; ++i){
    var c = str.charAt(i);
    for(j = 0; j<from.length; ++j){
        if(from.charAt(j)==c){
          c = to[j];
          break;
        }
    }
    ret += c;
  }
  return ret;
}

//文字列を200文字以内、改行5以内に切り詰める。
function chop(str){
  var ret="";
  var count=0;
  var lncount=0;
  for(i = 0; i<str.length && count<200 && lncount<5; ++i){
    var c = str.charAt(i);
    ret+=c;
    if(c<128){
      if(c=='\n'){
        lncount++;
      }
      count++;
    }else{
      count+=2;
    }
  }
  return ret;
}

//-->
</script>

<div id="preview"><!--ここに挿入される。--></div>

<br/><br/>

<form name="form">
<input type="radio" name="kind" onclick="view();">普通に話す  
<input type="radio" name="kind" onclick="view();">独り言
<input type="radio" name="kind" onclick="view();" checked>狼の囁き</br>
<textarea name="txt" rows="5" cols="60" onkeyup="view();" style="background-color: #ff7777">
</textarea>
</form>

スポンサーサイト
コメント
コメントを投稿する
URL:
Comment:
Pass:
:
 
Trackback
この記事のトラックバックURL
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。