タイトル一覧   関連タグ: Web VB
タグ:Web VB タイトル:TextBox1.Widthを、文字が入る幅に合わせたい
1 2
1:  お名前:初心者ASP.NET 2005/12/01 0:16:29

Excelのマクロみたいに
例:Columns("A:A").EntireColumn.AutoFit

TextBox1.Widthの幅を文字が入る幅に合わせたいのですが
どのようにコードを書けば良いのでしょうか?

大変お忙しい中大変恐縮ですが、よろしくお願いいたします。

2:  お名前:Jitta 2005/12/01 19:01:31

無理です。出来ません。

 それをするためには、フォントの横幅を知る必要があります。しかし、Web では、縦幅(長さ?)を知ることは出来ますが、横幅を知ることは出来ません。
 なぜなら、「プロポーショナルフォント」という言葉を聞いたことがないですか?"i" と "m" とで、幅が異なります。1文字1文字幅が異なるので、横幅を知るためには、なんという入力がされたのかを知る必要があります。ですから、何も入力されていないときに横幅を知ることは出来ません。
 そして、書いた文字の幅を知っているのは、サーバコードや JavaScript ではなく、OS やウインドウマネージャです。この辺には、Web アプリケーションではアクセスできません。よって、横幅を知ることは出来ません。

 1つの方法として、ピクセル単位で幅を決めうちする方法があります。しかし、ブラウザで表示されるフォントや、基本となる文字の大きさはユーザが自由に設定できますから、やはり意味がありません。
 とりあえず、非プロポーショナルフォントを使えば、em で横幅に近くはなります。しかし、絶対ではありません。
___________________________________________________________________
□ written by Jitta on 2005/12/01 http://blogs.wankuma.com/jitta/
□ Microsoft MVP :Visual Developer ASP/ASP.NET Oct.2005-Sept.2006
3:  お名前:ktz 2005/12/01 20:14:27

ASP.NETはやったことないので、はずしてたらごめんなさい。

Contorl#CreateGraphics()またはBitmapオブジェクトを作ることは出来ないのでしょうか?
もし、作成できればそこからGphicsオブジェクトを取得し、
Graphicsa#MeasureString()で文字列幅を取得することって出来そうな気がするのですが。

幅さえ取得できればTextChangedイベントで、幅をセットしてやればいいのかな?
ところで、ASP.NETの場合、TextChangedイベントって発行されるの?
4:  お名前:ktz 2005/12/01 20:17:33

自己レス

これって、PostBackさせないと無理か。
JavaScrritだけで制御することは、やっぱ無理そうやね。
5:  お名前:渋木宏明(ひどり) 2005/12/02 9:21:33

非表示の div に入力文字列を放り込んで、TextBox の幅を div の幅+α にしてみるとか。
6:  お名前:Jitta 2005/12/02 19:11:08

> 非表示の div に入力文字列を放り込んで、TextBox の幅を div の幅+α にしてみるとか。
 目から鱗です。。。

<input name="input1" id="input1" type="text" />
<input id="btn" value="fit" type="button" onclick="alignWidth();" />
<div id="getWidthArea" style="visibility: hidden; position: absolute"></div>
<script type="text/javascript">
<!--
    function alignWidth() {
        getWidthArea.innerText = document.forms[0].input1.value;
        document.forms[0].input1.style.width = getWidthArea.clientWidth;
    }
// -->
</script>

div 要素の style.display 属性を none にすると、表示されないので幅もありませんでした。visibility 属性を hidden にすると、幅が出来て他の要素の配置に影響するので、position 属性を absolute にすることで、影響を抑えました。
___________________________________________________________________
□ written by Jitta on 2005/12/02 http://blogs.wankuma.com/jitta/
□ Microsoft MVP :Visual Developer ASP/ASP.NET Oct.2005-Sept.2006

7:  お名前:渋木宏明(ひどり) 2005/12/02 20:07:41

>目から鱗です。。。

やりすぎるとダークサイドにはまって後戻りできなくなります ;-)

8:  お名前:初心者ASP.NET 2005/12/03 12:52:59

Jitta(^_^)様 ktz様 渋木宏明(ひどり)(^_^)様 ありがとうございます。

>目から鱗です。。。同感
出来ました。初心者なため、また質問に来るときもありますが、
その時もよろしくおねがいいたします。
大変勉強になり、本当にありがとうございました。
9:  お名前:初心者ASP.NET 2005/12/04 22:28:45

出来たと思ったら、よくみたら自分は、出来てませんでした。
すみません。

>無理です。出来ません。
btn を使わないやり方は、まだまだ今の自分の能力では無理です。
ダークサイド状態です。
10:  お名前:Jitta 2005/12/05 21:33:45

 まず、「文字を書き込む前にn文字分の幅にする」は、無理…なはず。。。等幅フォントを用いれば出来ますが、サイトを表示した人が「作成者 CSS」をオフにしていれば、等幅フォントが用いられる保証がないからです。

…嘘でした。
 まず、アルファベットでは "m" が幅の基準とされているようです。これは、Excel での基準なので、Web の方は W3C の仕様か RFC を調べた方がいいかも。"w" の方が広いような気がする。。。
 次に、日本語の漢字は、日本語が「縦書き」が基準な為に、幅は一定に揃えられているようです。
 ですから、ページ読み込み完了時に、"m" または適当な漢字をn文字分書いて幅を求めれば、文字を書き込む前に、ほぼn文字分の幅にすることが出来ます。


 「入力された文字に応じて、その幅に合わせる」であれば、先の方法で ok です。問題は、「いつ、入力が完了した、とするか」です。先の私のコードは、「ボタンクリック」を入力完了のトリガーとしました。他に、「入力完了」といえる「状態」があるでしょうか?
 たいていの場合、「カーソル(フォーカス)がそのオブジェクトから離れたとき」を、「入力完了」と判断しています。そのオブジェクトに対しての入力を完了すれば、他のオブジェクトにフォーカスを移すからです。ボタンクリックも、ボタンを押し込んだ瞬間に、フォーカスが移動しています。
___________________________________________________________________
□ written by Jitta on 2005/12/05 http://blogs.wankuma.com/jitta/
□ Microsoft MVP for Visual Developer ASP/ASP.NET Oct.2005-Sept.2006
1 2
お名前
メッセージ
次回のために入力情報を記録