textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」:phpspot開発日誌
textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」 2013年10月01日- yuku-t/jquery-textcomplete GitHub textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」。 長文を入力中にemoticonを入れたりする際に補完して便利にできるプラグインです。 オートコンプリートというと、単一行テキストが一般的だと思っていましたが、確かにtextareaに入れるのも便利ですね。 ajaxなどには対応していないっぽいですが文章入力に活用できるようにカスタマイズしてもよさそう 関連エントリ テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通
エディタをフルスクリーンにして編集しやすくできるjQueryプラグイン「jQuery Fullscreen Editor」:phpspot開発日誌
jQuery Fullscreen Editor エディタをフルスクリーンにして編集しやすくできるjQueryプラグイン「jQuery Fullscreen Editor」 このプラグインで初期化すれば、textareaの右上にボタンが表示され、クリックでブラウザ全体にtextareaが最大化されます 文書を書く場合はエディタ領域が広いほうが編集しやすいので、なかなか便利に使えそう ブラウザ全体に広がります 関連エントリ テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」
テキストエリアをフルスクリーン表示して操作できるjQueryプラグイン『jQuery Fullscreen Editor』 - あのねノート。
2013-09-17 テキストエリアをフルスクリーン表示して操作できるjQueryプラグイン『jQuery Fullscreen Editor』 WEB jQuery Fullscreen Editorは@buraksonさんによって作られたテキストエリアをフルスクリーン表示にできるjQueryプラグインです。 デモのアニメーション テキストエリアの右上のアイコンをクリックすると最大化されます。 『jQuery Fullscreen Editor』の使い方 zipファイルをダウンロードして、「fseditor.css」と「jquery.fseditor.min.js」を入手してください。 CSSを読み込みます。 <link rel="stylesheet" href="fseditor.css" type="text/css" media="all"> そしてjQueryを読み込んだ後にf
textareaでオートコンプリート機能を実装するjQueryプラグイン・jQuery.textcomplete
textareaでオートコンプリート機能を実装するスクリプト・jQuery.textcompleteのご紹介。デモではコメント投稿で絵文字を使う、みたいなケースが紹介されています。 textareaでオートコンプリート機能を実装する、というもの。使いどころは限られそうですが、コンテンツ次第では便利なスクリプトですね。 こういうの。上記例では絵文字を打つのにコロンで括るので、コロンを打つとオートコンプリートで候補を出してくれるようになっています。 jQueryは1.7以降を使うように、との事。 $('textarea').textcomplete(strategies);セレクタを指定して呼びだすテキストを作っていきます。 デモではコロンを正規表現で判別して事前に作ってあったテキストをオートコンプリートとして実装、アイコン付きに置換してるみたいですね。詳細はGithubに書かれています。 ラ
【jQuery習作】テキストエリア入力・保存後反映＆再編集の切り替え
COOKPADさんのレシピ登録ページにあるような、テキストエリアに入力・保存後反映され、再編集もできるようなものをjQueryで作ってみました。 サンプル＆ソース サンプルはこちら （IE8以上、Chrome、Firefox、Safariで動作確認済です） 挙動の流れは以下です。 テキストクリック ↓ テキストエリアに切り替え ↓ 保存＆再編集。取消をクリックすると内容はリセットされる。 HTML $(function() { var myTextBox = $(".textBox"); var myDefault = $(".default"); var myEdit = $(".editArea"); var myItem = $(".item"); var myPreserve = $(".preserve"); var myBecome = $(".become"); var my
GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 - Qiita
続編 JavaScript - Qiitaのtextarea自動補完がOSSになりました GitHubのコメントでは@と入力するとカーソルの下に入力補完が出現する。さらっとやっているが、実はこれが結構難しい。なぜ難しいのかというと、JavaScriptではカーソルが何文字目にいるかは分かるが、 カーソルのXY座標を取得するAPIが存在しない からだ。カーソル位置が分からなければ、適切な位置に補完候補を表示することができない。では一体どうすればいいのか？ 今回Qiitaではコメント欄でのメンションの補完機能を実装した。本稿では前述の問題を解決するために用いたテクニックを解説する。 ちなみにこのメンション補完機能はチーム用プライベートQiitaである「Qiita:Team」でも勿論使える。現在絶賛無料トライアル実施中なので、興味を持たれた方はそちらも使ってみて欲しい。 要約 textarea内
テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン:phpspot開発日誌
Expanding Textareas jQuery Plugin テキストエリアを動的リサイズ＆カスタマイズ可能なjQueryプラグイン。 文字の量に応じて自動でリサイズするテキストエリアはブラウザ標準でも付けてもらいたいぐらい便利なのですが、最低の高さを設定したり、リサイズ時のコールバックを設定したりできるプラグインのご紹介。 テキストをいれてなくても最小のサイズが指定できるのは便利。 リサイズされた時のコールバック設定により、現在の行数なんかを表示することもできますね 関連エントリ textareaのキャレットを細かく制御する関連jQueryプラグインまとめ 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」
通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」:phpspot開発日誌
diy/jquery-emojiarea GitHub 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」。 次のように、絵文字をテキストで表示するのではなくて、そのまま絵文字を埋め込めるtextareaに変えることができます ポップアップからクリックで挿入可能 :smile: とかでもいいのですが、初心者の場合はやはり見たまま編集が便利ですね。 6KBで軽量で$(element).emojiarea() と実装もお手軽なので、絵文字を入れたい場合など一度試してみてもよさそう 関連エントリ テキストの絵文字を画像アイコンに変えてにぎやかにしてくれるjQueryプラグイン
textareaのキャレットを細かく制御する関連jQueryプラグインまとめ:phpspot開発日誌
textareaのキャレットを細かく制御する関連jQueryプラグインまとめ ちょっと調査をする必要があったので調査したのですが、あとで忘れそうなのでブログに書きつつシェアです。 textarea内のカーソル位置に何かテキストを入れたい、今のtextarea内でのカーソル位置を知りたい、といった場合、クロスブラウザの事を考えると結構面倒なのですが、そういう際に使えるjQueryプラグイン集です。 カーソル位置にタグを挿入したりする場合なんかに覚えておくとサクっと実装できて良い感じです。 caretPos http://d.hatena.ne.jp/tubureteru/20110101/p1 textarea内でのカーソル位置を数値で設定したり、カーソルの位置を取得することが可能。 jCaret http://www.examplet.buss.hk/jquery/caret.php te
jQueryでtextareaのカーソル位置の行数を取得・設定(スクロール対応)
textarea内のカーソル位置や行数を取得したり、指定行のみ置換したりなどをJavaScriptでサラリと出来るかな?と思ったら、それなりに大変だったという記録です。 一部jQueryオブジェクトですがjQueryの機能は使っていないので依存しない改造も簡単だと思います。 カーソル位置までの行数 テキストエリア内のカーソルはキャレットという名称です。キャレット位置の行数を取得する関数は用意されておらず、キャレット位置までの文字数のみが取得できます。日本語も1カウントです。その後、改行コードの数を調べることで行数を割り出します。 まず、文字数から行数を取得できる関数をStringクラスに追加しておきます。ブラウザによって異なる改行コードの差異も吸収します。 String.prototype.getLinefromCount = function(start){ // 文字数から行数を取得
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テキストエリアをフルスクリーンにして超編集しやすくできるJS「WideArea」:phpspot開発日誌