解決済
TEXTAREAタグの、横方向の文字数指定を、どんなデザインでも問題無く表示させるには？
目下、TEXTAREAをLivedoorブログ投稿時に利用しています。横方向の文字数は、現在、デザインが崩れないように注意しながら、「決め打ち固定値」で投稿しております。（現在は「 COLS="40" 」と決めてしまっております。現在はCSSとしてShoeHeadを利用中です。）
例となるLivedoorブログ：
TEXTAREA定義があります。(^^);
-----
さて、将来、デザインを変更したくなった時に、デザインを崩してしまうことがないように、
TEXTAREAタグのCOLS変数に、正数値決め打ちではなく、Livedoorブログ変数から適当に演算して、適当となる解を変数名で埋め込みたいと希望します。
そのようなことは、可能でしょうか？
可能である場合は、どのようなLivedoorブログ変数を、投稿時に、COLS変数に代入すれば良いでしょうか？
それとも、Livedoor開発に御願いするべきことでしょうか？
- Ujiki.oO -
回答(1)
1.
<textarea cols="40" raws="30">↓
<SCRIPT TYPE="text/javascript">
<!--
var width_textarea=40;//default cols
var height_textarea=30;//default raws
var resize_x=0.3;
var resize_y=0.4;
if(document.all){// IE
width_textarea=Math.floor(resize_x*document.body.clientWidth);height_textarea=Math.floor(resize_y*document.body.clientHeight);
}else if(document.getElementById){
width_textarea=Math.floor(resize_x*window.innerWidth);height_textarea=Math.floor(resize_y*window.innerHeight);
}
document.write("<textarea cols=\""+width_textarea+"\" raws=\""+height_textarea+"\">");
//-->
</SCRIPT>
みたいな感じで書くと、ある程度大きさを調整できるかもしれません。resize_xとresize_yでウィンドウ内側のサイズの何倍のtextareaを作るか指定します。 謙遜されておられますが、ぱぱっと出てくる回答は素晴らしい能力かと存じ上げます。ありがとうございます。これからも宜しくお願い申し上げます。
コメント(11)
霊さん、回答ありがとうございました。遅くなったのは、霊さんの発言を受けて、アイデアを自己流に練って、JavaScriptライブラリーを試作しておりました。
http://members2.jcom.home.ne.jp/profile2006/js/get...
です。^^; divのclass名から「 scrollWidth 」値を呼び出す手段が結局は判明せず、色々考えているうちに、100%サイズのユニークなID付きのTABLEタグを発生させて、document.getElementByIdでscrollWidthを求めることに試行しました。結果は、
http://www.geocities.jp/www_mmj/JavaScript2006/040...
です。どれも１つのJavaScriptライブラリーを呼び出しています。関連記事は、
http://app.blog.livedoor.jp/mmj_aos/tb.cgi/625859
http://app.blog.livedoor.jp/mmj_aos/tb.cgi/627416
です。
「追記」で利用するだけなら、個別記事で利用したい場合にのみ呼び出しますか。ひょっとして「本文」でも解を利用するなら・・・・全てのHTMLに挿入しておこうかなと考慮中です。
あれもこれも、今回の霊さんの返答が無ければ、諦めていたかもしれません。返答を読みながら、アイデアへと駆り立てられました。ありがとうございました。さて、ピクセル数から、文字数へ変換させるには、CSSで指定されている文字サイズを参照したいですね。これは別の質問にしますか。(^^)；
色々と調べて行く内に、 http://www.metalusions.com/backstage/articles/8/ に行き着きもしました。^^
MS-IEかを判断させるのに「 document.all 」は、どうかと・・・・と言う意味の様に感じられます。そこのところは、どうなんでしょうね。
var Win = navigator.appVersion.indexOf('Win',0) != -1;
var IE = navigator.appName.indexOf("Microsoft",0) != -1;
if (Win && IE) {
} else {
}
などと言う例も見たような見てないような。米国のJavaScriptライブラリー配布所でも document.all で判断させているのが多そうなのですが。ここのところは、どうなんでしょうね・・・・^^;
TEXTAREAを利用したくて質問したわけですが、どうもLivedoorブログ内の投稿用のTEXTAREAとHTML化のON/OFFチェックボックスによる制御で、相性が悪くて、TEXTAREAでの投稿に難色が出てきました。
今後は、TEXTAREAではなく、DIVで代用しようかと考慮中です。そうなれば、もう文字数への変換も無用ですしね。^^
質問の意味を誤解してたかも。
たぶん、"getElementByClass"があれば全て解決するのでしょうが、今のところないです。これは、いろんな人が思っているので、将来CSSを直接参照できるようになる希望的観測をもってます。
ブラウザ判定ですが、Ujiki.oOさんのコードのように、古いものを切り捨ててもいい時期かとも思います。私のは、一応古いIEにだけ配慮しましたが、内心要らないよーな・・・。navigator.appなんとかは、ブラウザによって返す値が微妙？（Operaとか）
書き込みできなくていいなら、textareaよりはdivの方が遥かに利便はいいですよねー。
あと、どうでもいいですが、JSの別ファイルだと、<!--も-->も要らないと思います。
＞書き込みできなくていいなら、textareaよりはdivの方が遥かに利便はいいです
最初、http://blog.livedoor.jp/staff/archives/50403046.ht...
の記事を読んで、TEXTAREAを使うかと、使い易いのかと考えました。
＞要らないと思います。
うっ！^^; ですね。アチャー
色々と大変お世話になりました。ありがとうございました。ペコペコ m(_^_)m
- Ujiki.oO -
ベストありがとうございました。
う～む。あのJavaScriptライブラリーは無意味かも。DIVだったら、WIDTHに100%指定が可能ですからね。ううう(;L;) 誰か利用中のフォントサイズを参照する技を知らないかな。TEXTAREAの文字数の解を求めるJavaScriptライブラリーでなかったら使い道が無いね。とほほほ
負け惜しみですが・・・・勉強にはなりましたね。ありがとう。
よく内容読んでないのですが、CSSの方にはフォントサイズなど計算したい部分は設定しないで、JSでCSSを吐きだせば幸せになれそうな気がします。CGI使っていいなら、それが一番楽でしょうか。。。
オニキスさん、コメントありがとうございます。
内容は脱線しますが、「全て反転させて選択」は便利なので、別のHPですが、TEXTAREAと、今回のJavaScriptライブラリーを利用中です。
フォントを考える方からすれば、「ピクセル固定フォントサイズの指定は邪道」だそうですが、ブラウザー標準フォントサイズに固定すれば、横幅ピクセルの１０分の１の値を、TEXTAREAの文字数に指定して、喜んでおります。(あっ、FireFoxでしか見てないなあ^^;) 「１０分の１」の解は、全く科学的では無いです。^^;
- Ujiki.oO -
米国製のJavaScriptライブラリーの中で、ブラウザー種別判断に以下のようなスクリプトがありました。目下、利用中です。ご参考までに、(^^)
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
- Ujiki.oO -
トラックバック(5)
将来、デザインを変えても崩れないDIV窓
全てのページにJavaScriptライブラリー「 getScrollWidth.jp 」を埋め込みました。しばらく、う～む、２～３日はデバッグモードのままにしておきます。var mesg655='';mesg655+='';document.write(mesg655);mesg655=' 最大サイズから５０を引いた数値が、この窓(?)の横幅で....
デザインに影響されないで幅を取り出す方法
i以下のような１００％指定幅のTABLEタグをダミーで作成して、その中身の幅のピクセル値をレポートする。こうすれば後々、デザインを変えても構わないってことかも。<table id="objTbl65" bgcolor="lightgreen" border="0" cellpadding="0" cellspacing="0" height="100" ...
デザインに影響されないで幅を取り出す方法（その２）
Album Blogger for PET(s):デザインに影響されないで幅を取り出す方法 - livedoor Blog（ブログ）デザインに影響されないで幅を取り出す方法（その２） JavaScriptライブラリーを作ってみました。デバッグモード付き。ID変数名を自由に変更可能。結果は配列変数に代入さ...
