CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更

2023/10/10 149 users content CSS 新しいプロパティ フォーム 文字量

今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-h... 続きを読む

GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*

2023/04/10 55 users シンタックスハイライト GitHub hogashi div

ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div... 続きを読む

textareaをカスタマイズできるReact用のライブラリを作成しました

2022/02/17 6 users フィードバック HTML テキスト スター 皆さんご存知

HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 テキスト... 続きを読む

TrelloのDescription欄だけでUIを超えた手触りが良すぎて学びしかない - Make組ブログ

2021/02/27 373 users Trello Description 手触り ToDoリスト

TrelloのUI（UX）が素晴らしすぎます。UIと言っても表面上のデザインだけでなくて、基本的な要素の手触りが良すぎます。 とくに上の写真にあるDescriptionがすごい。ここだけで作り込みがすごすぎてビックリする。 これはカード（Todoリストでいうタスク）の説明欄です。入力はtextareaででき、URLなどが入力されると表... 続きを読む

【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法

2021/02/20 36 users viewport イメ カタ スクラップ エディター

Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメ... 続きを読む

JavaScript - JavaScriptを読んでいてたまに出てくる唐突な二つの括弧の意味｜teratail

2020/03/03 15 users teratail 括弧 createElement 意味 他人

お世話になります、他人が作ったJavaScriptを見ていると 唐突に謎の書き方が出てきますが言語化が難しく調べるのが難しいものがあります その一つが以下のソースなのですが TextEditor.prototype.createElements = function () { this.TEXTAREA = document.createElement('TEXTAREA'); this.TEXTAREA.tabIndex = -1; (0,... 続きを読む

textareaなどでTwemojiを手軽に選択できるようにするスクリプト・「Twemoji-Picker」 | かちびと.net

2019/05/03 10 users Twitter jQuery OSS input要素 net

Twemoji-Picker Twemoji-PickerはTwitterがOSSとして公開している絵文字プロジェクト、Twemojiを手軽に選択できるようにするスクリプトです。jQueryに依存します。上サンプルのように、簡単に選択、投稿できるようにする、というもの。使い方も簡単で、jQueryと本スクリプトを読み込んでtextareaやinput要素など投稿でき... 続きを読む

GoでDialogsを使ったSlack Appを作る - shiimaxx's blog

2018/12/12 29 users Button Slack text select MENU

このエントリは Go Advent Calendar 2018 12日目の記事です。 SlackにはInteractive frameworkという仕組みがあります。これによりButtonやMenuなどのインターフェースをユーザに提供することができます。 このInteractive frameworkのひとつとしてDialogsがあります。Dialogsは、Text、TextArea、Selectの要素からなる... 続きを読む

textareaを画像アップ可能なmarkdown editorにするnpmモジュール - komagataのブログ

2017/11/09 38 users komagata npmモジュール 画像アップ ブログ

@machida さんが 「全てのテキストエリアはgithubみたいに画像のD&D・コピペができて欲しい。あとMarkdownで書きたい。」 と常々言っていて、僕もちょっとしたコメント欄でもMarkdownが使えたら嬉しいけどいちいち実装が面倒なので、 「確かにそうですよねー」 と言って流していました。 しかし流すのにも限界がきたので、TEXTAREを画像のD&DとコピペができるMarkdown ... 続きを読む

JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io

2017/03/02 740 users jxck.io 数え方 JavaScript 文字コード 理由

created_at: 2017-03-02 updated_at: 2017-03-02 tags: [ utf-16 , unicode , javascript ] Intro <textarea> などに入力された文字数を、 JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども... 続きを読む

JavaScript - inputやtextareaの値が変わったらイベント発火（IME入力中を除く） - Qiita

2015/09/17 51 users focus 発火 Qiita input 検証

※IE11ではFocus取得・喪失時に入力エリアが空の場合にイベントが発火します。 ※IE9ではIME入力中にFocusを喪失すると2回イベントが発火します。これは通常のIME入力確定のイベントと下記の入力値が変わった時のFocus喪失によるイベントの発火が起こるためです。 ※IE9では入力値が変わったときにFocusを喪失するとイベントが発火します。 ※上記の検証には含まれていませんが、IE9で... 続きを読む

textareaを入力値によってリサイズできるシンプルなjQueryプラグイン「autoresize-textarea」:phpspot開発日誌

2015/04/22 17 users optional phpspot開発日誌 入力値

textareaを入力値によってリサイズできるシンプルなjQueryプラグイン「autoresize-textarea」 2015年04月22日- autoresize-textarea - A jQuery (optional) plugin can automatically resize the textarea's height textareaを入力値によってリサイズできるシンプルなjQ... 続きを読む

ブラウザのtextareaでもSublime Textを利用する | Program | position: absolute;

2014/03/26 38 users absolute position Program CMS

このエントリーはWeb制作者のためのSublime Textの教科書のアウトテイク的なエントリーです。 CMSなどを用いて制作や運用をしていると、どうしてもtextareaとの付き合いが多くなります。チャチャッと終わる場合はいいのですが、テキストが多い場合や、HTMLやマークダウンで入力するときはエディターでやりたくなります。コピーペーストでも良いといえば良いのですけど、そういうひと手間は減らすに... 続きを読む

今年は一行日記をつけてみない？『One Sentence Diary』 | 100SHIKI

2014/01/03 18 users 100SHIKI 一行日記 保存 編集 良い文章

ちと不安定だったりもするが、良いコンセプトだと思ったのでご紹介。 One Sentence Diaryは、一行日記をつけるためのサービスだ。 毎日、ひとつのTextareaを与えられるので、300文字以内で日記を書いていくことができる。 ちなみにユニークなのは、いったん書き込んで保存をすると、5分以内じゃないと編集ができない点だ。 あとで書き直せないとなると、思い切りの良い文章がかけそうだな、とも... 続きを読む

textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」:phpspot開発日誌

2013/10/01 22 users Emoticon phpspot開発日誌 長文 入力中

textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」 2013年10月01日- yuku-t/jquery-textcomplete GitHub textareaでオートコンプリートできるようにするjQueryプラグイン「jquery-textcomplete」。 長文を入力中にemoticonを入れたりする際に補完して便利にできる... 続きを読む

JavaScript - Qiitaのtextarea自動補完がOSSになりました - Qiita [キータ]

2013/09/02 266 users 人伝 GitHub キータ Qiita OSS

jQuery.textcomplete（デモ） GitHubのようなtextareaの補完機能を実装する - カーソル位置の取得 を書いたのも今は昔、いつか続きを書こう書こうと思いながら気がつけば5ヶ月が過ぎました なんか続きを書くのが面倒くさくなったのと、某日本最大レシピ共有サイトの技術部長の人から「OSSにして欲しい」という要請を人伝に受け取ったこともあって、OSS化した次第です。 ライセンス... 続きを読む

HTML5のさまざまなform要素があなたのブラウザでどのように見えるかのまとめ -Native form elements | コリス

2013/04/16 101 users コリス Disable Button Option input

HTML5のform要素、input, textarea, select, option, fieldset, legend, label, buttonの各要素とさまざまなタイプをまとめたサイトを紹介します Native form elements 各要素は余計な装飾がない状態で、上がデフォルト、下が入力不可のdisableです。 下記は、Chrome26 for OS XでのHTML5の各フォ... 続きを読む

フォーム入力要素の注釈のマークアップ — Website Usability Info

2013/04/16 25 users 注釈 Website Usability Info UCD

Talking about web usability, accessibility, IA, UCD, UX,... 公開日 : 2013年4月16日 カテゴリー : アクセシビリティ Web サイトのフォームの中には、入力要素 (<input> 要素、<textarea> 要素、<select> 要素) のすぐ上か下に、注釈を付け加える場合があります (たとえば、入力フォーマットを指定したい場... 続きを読む

通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」:phpspot開発日誌

2012/12/07 24 users GitHub DIY smile phpspot開発日誌 軽量

diy/jquery-emojiarea GitHub 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」。 次のように、絵文字をテキストで表示するのではなくて、そのまま絵文字を埋め込めるtextareaに変えることができます ポップアップからクリックで挿入可能 :smile: とかでもいいのですが、初心者の場合はやはり見たまま編集が便利ですね。 6KBで軽量で$(... 続きを読む

textareaのキャレットを細かく制御する関連jQueryプラグインまとめ:phpspot開発日誌

2012/11/12 44 users キャレット クロスブラウザ phpspot開発日誌 調査

textareaのキャレットを細かく制御する関連jQueryプラグインまとめ ちょっと調査をする必要があったので調査したのですが、あとで忘れそうなのでブログに書きつつシェアです。 textarea内のカーソル位置に何かテキストを入れたい、今のtextarea内でのカーソル位置を知りたい、といった場合、クロスブラウザの事を考えると結構面倒なのですが、そういう際に使えるjQueryプラグイン集です。 ... 続きを読む

Ruby, C++のBoost::Lambdaみたいなスタイルでブロック書けるgemつくった - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥

2012/08/21 19 users Marquee Proc Boost gnarl Lambda

boost_lambda_style_proc $ gem install boost_lambda_style_proc 名前が長い……最初はboost_style_lambdaにしようと思ったけどLambdaじゃなくてProcを生成するためのライブラリなので誠実ではない！！！となった結果こうなった(長い)Boost::LambdaっていうのはC++のBoostという普通のテクニックを駆使したラ... 続きを読む

[jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った | 秋山ブログ

2012/06/06 36 users キャレット サジェスト Webアプリケー 座標 ライブラリ

textareaに表示されているキャレット位置(カーソル位置)の画面上のXY座標(ページの一番左上からの位置)を取得したいと思って検索したけれど、キャレットの文字列内の位置(何文字目)を取得するライブラリばかりで、画面上からの位置を取得できるライブラリがなかった。なので、テキストエリアを指定するだけで簡単に現在のキャレット位置の座標が分かるライブラリをつくった。サジェストを表示するWebアプリケー... 続きを読む

brainfxxk処理系を最適化した話 - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥

2012/05/06 19 users Marquee gnarl 技術メモ

ニコニコ超会議における､Hogelog氏による最速brainfuck処理系の発表残念なパンを食べながら残念な言語でハッカソンをする会の開催といった現象が私の中で化学反応を起こした結果､BF処理系の最適化にゴールデンウイークを費やすという残念な結果となった｡処理系概要hogelog氏のfast-bfにいくつか最適化を加えました｡プロジェクトは以下｡https://github.com/hogelog... 続きを読む

転職しました - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥

2012/04/06 77 users Marquee gnarl 技術メモ

4年弱勤務していたチームラボ株式会社を退職し､3月末から株式会社ドリコムで働いています｡転職のきっかけは､受託開発との関わり方に悩んだことでした｡ソフトウェアの美しさというのは､工具の美しさと似ています｡何らかの目的を達成するために作られ､経験によって磨き上げられた機能美こそがその本質です｡明確な目的のために作られ､常に改善され､価値を生み出す｡私はそのような美しいソフトウェアに奉仕したいと思って... 続きを読む

Rubyによる形態素解析エンジンokura 0.0.1をリリースしました - <s>gnarl,</s>技術メモ”’<marquee><textarea>￥

2012/03/19 167 users Marquee gnarl Ruby 技術メモ

12月にさくさくテキストマイニングで発表したpure Rubyによる形態素解析エンジンをgem化しました｡まだ発展途上で機能が少なかったりパフォーマンスが悪かったりしますが､いちおう動くレベル*1になったので公開します｡ 注意事項バージョン0.0.xのうちは､インタフェースや辞書フォーマットは頻繁に変更される予定です｡ある程度安定したら0.1.0出します｡今のところ､Ruby1.9系専用です｡ 取... 続きを読む