タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ここのことです*1。 真ん中のカラムがコードの表示 (開発者ツールで見ると textarea にコードが入っている 目次 目次 シンタックスハイライトはどうしているのか？ 上に表示されている div ならその文字もマウスカーソルで選択できるはずでは？ なぜこうしたのか？ 困ることはないのか？ たしかこないだまでは普通に div ？ で、テキストをマウスカーソルでドラッグアンドドロップで選択したりするような感じだったはずだけど、最近？になって、選択できる部分は textarea になっていて、点滅するカーソルが出るので、キーボードでエディタのように移動・選択することができる (もちろん編集はできない *2 )。 選択範囲の一番右に白く点滅するカーソルが登場している シンタックスハイライトはどうしているのか？ textarea は部分的に色を変えるとかはできないはずだし、スタイルの様子を見ると
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。３行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、１ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
GitHub - mmig/text-caret-pos: xy coordinates of a textarea or input's caret
Get the top and left coordinates of the caret in a <textarea> or <input type="text">, in pixels. Useful for textarea autocompletes like GitHub or Twitter, or for single-line autocompletes like the name drop-down in Facebook or the company dropdown on Google Finance. How it's done: a faux <div> is created off-screen and styled exactly like the textarea or input. Then, the text of the element up to
GitHub - shaoruu/typehere.app: ✎ A quick, simple, and powerful textarea
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - wstaeblein/texthighlighter: Vanilla JS class to highlight search results in a textarea while maintaining the area's functionality
No dependencies. No configuration. Just instantiate the class and call a method. Can be used in as many textareas as needed, just instantiate for each one. Responsive. The markings will adjust to screen size, textarea size and scroll. Keeps the original background from the textarea. Can be properly destroyed. Will remove all events and structure. Can choose between case sensitive and insensitive s
GitHub - inokawa/rich-textarea: A small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.
Styleable texts: Not just highlighting texts like similar libraries, this library also supports colorizing, decorating and more. Regex or any tokenizers can be used. Easy to interact with events: You can get caret position and can catch some mouse events on texts, which are useful to display something reflects user actions. Compatible with textarea: Except added features, this library is designed
小ネタである。 昔よりは便利になったとはいえ、Gmailのメールとか掲示板の投稿とかをウェブブラウザ上で書くのはめんどくさい。Emacs上で書きたいのである。というか、Emacs以前に「メール」とか「掲示板」とかいう時点ですでに老害感が横溢しており我ながらびびった。 それはさておき、そういうとき一昔前だとウェブブラウザ側にEdit with Emacsというアドイン、Emacs側に edit-server.el というのを入れて使っていたのだが、設定が複雑で何かとうまく行かなかった覚えがある。これが最近だと、ブラウザ側はGhostTextアドイン、Emacs側にatomic-chromeを入れれば楽に実現できる。名前がatomでchromeって大丈夫なのかねという感じだが（Atomはディスコンになってしまったし）、AtomやChromeだけではなくEmacsにもMozilla Firefo
GitHub - WebReflection/highlighted-code: A textarea builtin extend to automatically provide code highlights based on one of the languages available via highlight.js
<!doctype html> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> textarea[is="highlighted-code"] { padding: 8px; } </style> <script type="module"> (async ({chrome, netscape}) => { // add Safari polyfill if needed if (!chrome && !netscape) await import('https://unpkg.com/@ungap/custom-elements'); const {default: HighlightedCode} = await import('https://unpkg.com/highlig
HTMLにおいて、フォーム要素のテキストエリア（textarea）の領域の拡大、縮小などのリサイズを禁止したり、サイズ変更に関する振る舞いを制限する方法についてです。 textarea の拡大機能について HTMLフォームのテキストエリア（textarea）要素は、デフォルトで下記のような「つまみ」が存在し、ドラッグすることで拡大することが可能になっています。 ユーザの操作によって、エリアの大きさが勝手に変わってしまい、予期せぬレイアウト乱れが発生してしまったりします。このようなリサイズを禁止し、サイズを固定するように対策します。 拡大・縮小を禁止し、サイズを固定する 下記のように、CSSのリサイズを制御するプロパティ（resize）を使って禁止し、サイズを固定することができます。 resizeプロパティを「none」に指定する事により完全に大きさを固定できます。 textarea { r
この記事は GMOアドマーケティング Advent Calendar 2023 22日目の記事です。 お疲れ様です。GMOアドマーケティングの天河です。 テキストエリアなどの入力系のタグ内のテキストを選択した際に、その部分の座標情報を取得する方法を共有したいと思います（なかなか情報がなく苦戦した）。 ちなみに現時点で一発で取得できるメソッドは存在しません。ライブラリなどを利用する必要があります。 ちなみにこれができると、Twitter（現 X）や Instagram などのSNSでよく見るハッシュタグの予測変換機能が作れます。 HTML内で選択したDOM要素の情報は const selectedText = document.getSelection(); によって、Range オブジェクトとして取得することが可能です。ここで取得した Range オブジェクト情報から selectedTe
Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装する【textarea,input】 - Qiita
Vue(Nuxt.js)で、textarea・inputで入力したものをEnterで送信、Shift+Enterで改行する機能を実装する方法です。 チャット機能を実装する時などに便利かと思います。 Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装 <template> <div> <p>送信:</p> <p>{{ sendMessage }}</p> <textarea v-model="message" @keydown.enter.exact="keyDownEnter" <!--enterをkeydownした時のイベント--> @keyup.enter.exact="keyUpEnter" <!--enterをkeyupした時のイベント--> @keydown.enter.shift="keyEnterShift" <!--enterとshiftを
【カンタン】Vueで縦に自動伸縮するtextareaの作り方 | How to make auto resizing <textarea>with Vue.js - Qiita
【カンタン】Vueで縦に自動伸縮するtextareaの作り方 | How to make auto resizing <textarea>with Vue.jsHTMLCSSJavaScripttextareaVue.js english ver インターネッツで調べてみても中途半端なtextareaしか出てこなかったので、備忘も兼ねた記事です。 伸びるけど縮まないとか、縮むけど1文字いれるごとに2pxずつしか縮まないとか、意味なくない！？！？！？！？！？！？ んおお！？！？！？！？ まずは結果 うおおおおおおおお うおおおおおおおお うおおおおおおおお うおおおおおおおお うおおおおおおおおうおおおおおおおお うおおおおおおおお うおおおおおおおおうおおおおおおおおうおおおおおおおお うおおおおおおおお うおおおおおおおお うおおおおおおおお コード 今気づいたけどマークダウンの候補にv
<textarea> の値の改行コード | knooto
JavaScript 上での改行コード JavaScript 上の value (HTMLTextAreaElement の value プロパティ) で取得できる値の改行コードは LF (U+000A ラインフィード。\n) です。 別の改行コードがあっても LF に正規化されます。 例 1行目 2行目 改行コード表示 ここに結果が表示されます。 フォーム送信された値の改行コード フォーム送信された値の改行コードは CRLF (U+000D キャリッジリターン / U+000A ラインフィード。\r\n) です。 別の改行コードがあっても CRLF に正規化されます。 例 (PHP) ソースコード <?php $ta1 = ''; if (isset($_POST['ta1'])) { // 改行コードを \r, \n に変換 $ta1 = strtr($_POST['ta1'], ["
GmailなどのtextareaをEmacsで編集する
小ネタである。 昔よりは便利になったとはいえ、Gmailのメールとか掲示板の投稿とかをウェブブラウザ上で書くのはめんどくさい。Emacs上で書きたいのである。というか、Emacs以前に「メール」とか「掲示板」とかいう時点ですでに老害感が横溢しており我ながらびびった。 それはさておき、そういうとき一昔前だとウェブブラウザ側にEdit with Emacsというアドイン、Emacs側に edit-server.el というのを入れて使っていたのだが、設定が複雑で何かとうまく行かなかった覚えがある。これが最近だと、ブラウザ側はGhostTextアドイン、Emacs側にatomic-chromeを入れれば楽に実現できる。名前がatomでchromeって大丈夫なのかねという感じだが（Atomはディスコンになってしまったし）、AtomやChromeだけではなくEmacsにもMozilla Firefo
ダイアログで指定した文字サイズ、文字数、行数をもとに、Illustratorのエリアテキストのサイズを変更するJavaScript「change-textarea-size-for-illustrator」の販売を開始しました - ごんれのラボ
概要 商品ページ change-textarea-size-for-illustratorとは おすすめポイント 仕様 ダイアログ 設定ファイル 動作環境 インストール方法 v1.1.0で追加・改修した機能 ダイアログに入力した文字サイズと行送りをエリアテキストに適用する ダイアログの行数に0を入力すると行方向のサイズ変更を行わない 概要 お世話になっている知人から「Illustratorのエリアテキストのサイズを、ダイアログで指定した文字数や行数に応じたサイズに変更するJavaScriptがほしい」と相談を受けて作ったスクリプトです。 Twitterにて実装中のスクリプトの簡単なデモ動画を公開したところ、反響があったので、Boothで販売することにしました。 商品ページ macneko.booth.pm Youtubeに紹介動画をアップロードしました（内容はv1.0.0のものです） ch
javascript/react dynamic height textarea (stop at a max)
What I'm trying to achieve is a textarea that starts out as a single line but will grow up to 4 lines and at that point start to scroll if the user continues to type. I have a partial solution kinda working, it grows and then stops when it hits the max, but if you delete text it doesn't shrink like I want it to. This is what I have so far. export class foo extends React.Component { constructor(pro
こんにちは！ 技術担当のレミです。 <textarea>でテキストを入力することができることをもう皆さんご存知だと思いますが、その<textarea>の中でユーザが改行した時にどうなるかわかりますでしょうか？ 特に何も「↩︎」のようなキャラクターが入った訳でもないのに、ちゃんと改行されていますよね。 さて、その<textarea>の内容をそのままサーバのデータベースに保存したとします。 再び、保存した内容を<p></p>に表示させた時にはどうなるでしょうか？このようになります。 改行が、、、失われている、、！！ さっきは改行のキャラクターなどが何も見えなかったにも関わらずきちんと改行されていたので、おそらく裏では「改行の情報」があるはずですよね？コードを検証しても何も見えないんですけど、、！ と悩んでいるあなたに教えます。 その情報は、、、 ちゃんとあります。 HTML Entities
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでtextareaの入力内容で高さを自動調整する方法をご紹介しています。 では、解説していきます。 本記事で作成するもの 本記事の内容で完成するものがこちら！textareaに値を入力していくと、スクロールバーが表示される行数になった場合にtextareaの高さが自動的に調整されるようになっています。実際に操作してみてください。 See the Pen 6153 by ryohei (@intotheprogram) on CodePen. 注意点としては、textareaの高さを右下の角からマウス等でリサイズすると、幅は維持できますが高さは入力内容に応じて自動で調整されます。その点だけご認識ください。 では、作成していきましょう！ textareaの要素を作成する HTMLでtextareaを作成しま
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita
textareaをカスタマイズできるReact用のライブラリを作成しました
GmailなどのtextareaをEmacsで編集する - Qiita
HTML：textareaの拡大/縮小を禁止し、サイズを固定する方法 | WWWクリエイターズ
input, textarea中のキャレット座標 (カーソルの位置) を取得する
Textareaで保存したテキストの改行を表示させる方法（\n \r とは？）
【JavaScript】textareaの入力内容で高さを自動調整する
www.hitozuma-douga-ichiran.com
yui3.ht.gob.jp
amiyoshida.hatenablog.com
www.ero-doujin-manga.com
nikkan-spa.jp
www.av-maker.com