より賢くサイズ調整するテキストエリアに改良する過程 - ザリガニが見ていた...。
前回からの続き。 その後使ってみて、テキストエリアの高さが行数によって自動調整されると、素晴らしく便利なことは分かった。特にソフトウェアキーボードを活用するiPad環境では必携の機能になりそう。 半角￥nは、半角＼nに置き換える必要あり。 javascript:(function(){ var els = document.getElementsByTagName('textarea'); for (i = 0; i < els.length; i++){ els[i].style.height = 'auto'; els[i].style.overflow = 'auto'; els[i].addEventListener('input', _resize, false); els[i].addEventListener('focus', _resize, false); } funct
GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 - Qiita
続編 JavaScript - Qiitaのtextarea自動補完がOSSになりました GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しない からだ。カーソル位置が分からなければ、適切な位置に補完候補を表示することができない。では一体どうすればいいのか？ 今回Qiitaではコメント欄でのメンションの補完機能を実装した。本稿では前述の問題を解決するために用いたテクニックを解説する。 ちなみにこのメンション補完機能はチーム用プライベートQiitaである「Qiita:Team」でも勿論使える。現在絶賛無料トライアル実施中なので、興味を持たれた方はそちらも使ってみて欲しい。 要約 textarea内
Opera で TAB キーによるフォーカスの移動を抑制する - WebOS Goodies
TEXTAREA に文字列置換機能を追加するの記事で参考にさせていただいた Enjoy×Study さんで、 Opera でTABキーの入力をキャンセルする方法という記事を見つけました。 Opera では、キーイベントをすべてキャンセルしても、 TAB キーによるフォーカスの移動だけは禁止できないそうです。試してみると、確かに私の TEXTAREA_Replace.user.js でもフォーカスが移動してしまいました（´Д｀；。これはちょっと気持ち悪いですね。 なにかいい方法はないかと思っていたのですが、あるとき、 Google Personalized Homepage のガジェット内にある TEXTAREA では TAB キーを押してもフォーカスが移動しないことに気付きました（ガジェット内にフォーカスを受けるコントロールがひとつしかない場合）。ということは、 TEXTAREA を IF
きまぐれ日記: Javascript でキャレットの位置を取得できる?
Ajax IME は Javascript を悪用しつつ強引にインラインかな漢字変換を実現しています． 簡単そうに見えて以外とややこしいのが，変換候補の表示. textarea のキャレット(カーソル) のピクセル単位での位置をなんとかして取得してその位置に変換候補を 出す必要があります． ありがちな google suggest ような補完インタフェイスだと inputbox の真下に出せばいいので位置は完全にわかるのですが，textarea は簡単ではありません． 調べた限り，どうやら標準ではキャレットの位置を取得できないそうです． ただし IE だと以下の方法でピクセル単位での位置がわかります. var caretPos = document.selection.createRange(); y = (caretPos.offsetTop + document.documentEle
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
テキストエリアでリターンキーを押した際に、submitイベントの発生を抑止する方法 - Enjoy*Study
テキストエリアでのリターンキーで、submitイベントが発生しないようにする場合、ブラウザ毎にどのような処理を書けばいいのか調べてみました。(submitイベント自体に処理を追加せずに、テキストエリアでのイベントで制御したかったので) テキストエリアでのリターンを拾えるイベントとしては、下記の3つがあります。 keypress keydown keyup イベントをキャンセルする方法は、IEのJScriptの実装と、DOM 2のEventモデルでの実装である下記の2パターンを試しました。 event.preventDefault() event.returnValue=false そして確認の結果、上記のイベント×キャンセル処理の組み合わせでsubmitイベントがキャンセル出来るのは、下記のパターンとなりました。 IE 6 keydown - event.returnValue=false
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.openwebware.com/products/openwysiwyg/
TEXTAREA に文字列置換機能を追加する - WebOS Goodies