桜上水日記#2

桜上水在住のフリーのプログラマ/システムエンジニアの徒然なる日記風テキスト

引用:textarea|textの幅を入力にあわせて動的に変化させる

mixiのAjaxトピで立ってた"Google Spreadsheets"的な入力フォームのTips

textareaや、input type="text"の幅を入力にあわせて動的に変化させる

onkeyupやonkeypressのタイミングでtextareaの内容をspanにコピーして、spanのoffsetWidthをtexareaの幅に設定してやればよい。(ここでは40px余計に幅を取っている)
textareaとspanのフォント指定をまったく同じにしないと、微妙にずれてくる。
実際に使うときは、spanを visibility="hidden" にしてやればよい。

※IEの場合、[textarea].createTextRange().boundingWidthを使う手もある。

function resize() {
var t = document.getElementById("test");// textarea
var s = document.getElementById("hidden_span");// span
s.innerHTML = t.value;
t.style.width = s.offsetWidth + 40 + "px";// 40px余計に幅を取る。
document.getElementById("info").innerHTML = s.offsetWidth + "px";
}

これは便利な・・・
使わせて頂きます。

-

-

お絵かき画像検索

retrievr.png

retrievr - search by sketch / search by image

左の窓に絵を描く(または画像をアップロードか画像URLを指定)とそれに似た画像を検索してくれるサイトです。(まだ実験中の模様)

これはすごい。画像分析とAjaxでここまでたのしげなものができるとは。
ちゃんとステートも保持されててなかなかの完成度。

とおもったがiframeでlocation.hrefしてた罠。おしいっ。

-

-

MTでAjax

MTの検索窓でGoogle Suggest的なものでも作ってみよかいと思いたつも
本家プラグインのページで紹介されてました。時既に遅し。 ⇒Ajaxify

続きを読む>>

-

-

 1/1 

Calendar
<< 神無月 2017 >>
SunMonTueWedThuFriSat
1234567
891011121314
15161718192021
22232425262728
293031    
Categories
New Entries
Archives
Profile
Other