タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
ここのことです*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
GitHub - panphora/overtype: The markdown editor that's just a textarea https://overtype.dev
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
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
THE MARKDOWN EDITOR THAT'S A TEXTAREA OverType is a transparent textarea over rendered markdown. Plain text simplicity, WYSIWYG beauty, zero complexity. AN UNDER-ENGINEERED SOLUTION A SINGLE LAYER OF ABSTRACTION - A textarea over a preview div AN OPEN BOX - Read, understand, and modify the code WYSIWYG WITHOUT THE HAIR-PULLING - Everything just works, it's native
GitHub - shaoruu/typehere.app: ✎ A quick, simple, and powerful textarea
Most things are in the ctrl/cmd-K menu. I will call it cmd-K for this guide. Cmd-K uses fuzzy search. There are two types of things that cmd-K has: notes and commands. Notes are the notes you've created, commands are things like theme toggle, vim toggle, show/hide scrollbar, import/export, etc. Navigate in the Cmd-K menu by up/down arrows. Create a new note by typing the note title and run the cre
GitHub - wstaeblein/texthighlighter: Vanilla JS class to highlight search results in a textarea while maintaining the area's functionality
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 - inokawa/rich-textarea: A small customizable textarea for React to colorize, highlight, decorate texts, offer autocomplete and much more.
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 - catnose99/use-chat-submit: React hook to handle chat textarea submit behaviors (Enter vs Mod+Enter) with IME-safe handling.
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
によって、Range オブジェクトとして取得することが可能です。ここで取得した Range オブジェクト情報から selectedText.getRangeAt(0).getBoundingClientRect() で、選択した箇所の座標情報を取得することができます。 しかし、input タグや textarea タグの中のテキストを選択しても同じように Range オブジェクト情報は取得できません。空のオブジェクトが返却されてしまいます。 input タグや textarea タグではこの Range 情報を取得するメソッドはありません。 ※ しかし input , textarea タグ内のテキストに選択範囲を設定するメソッドはなぜかある HTMLInputElement: setSelectionRange() method この入力系DOM内の座標情報を取得するためにはどのような手
GitHub - WebReflection/highlighted-code: A textarea builtin extend to automatically provide code highlights based on one of the languages available via highlight.js
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
HTMLにおいて、フォーム要素のテキストエリア（textarea）の領域の拡大、縮小などのリサイズを禁止したり、サイズ変更に関する振る舞いを制限する方法についてです。 textarea の拡大機能について HTMLフォームのテキストエリア（textarea）要素は、デフォルトで下記のような「つまみ」が存在し、ドラッグすることで拡大することが可能になっています。 ユーザの操作によって、エリアの大きさが勝手に変わってしまい、予期せぬレイアウト乱れが発生してしまったりします。このようなリサイズを禁止し、サイズを固定するように対策します。 拡大・縮小を禁止し、サイズを固定する 下記のように、CSSのリサイズを制御するプロパティ（resize）を使って禁止し、サイズを固定することができます。 resizeプロパティを「none」に指定する事により完全に大きさを固定できます。 textarea { r
小ネタである。 昔よりは便利になったとはいえ、Gmailのメールとか掲示板の投稿とかをウェブブラウザ上で書くのはめんどくさい。Emacs上で書きたいのである。というか、Emacs以前に「メール」とか「掲示板」とかいう時点ですでに老害感が横溢しており我ながらびびった。 それはさておき、そういうとき一昔前だとウェブブラウザ側にEdit with Emacsというアドイン、Emacs側に edit-server.el というのを入れて使っていたのだが、設定が複雑で何かとうまく行かなかった覚えがある。これが最近だと、ブラウザ側はGhostTextアドイン、Emacs側にatomic-chromeを入れれば楽に実現できる。名前がatomでchromeって大丈夫なのかねという感じだが（Atomはディスコンになってしまったし）、AtomやChromeだけではなくEmacsにもMozilla Firefo
<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のメールとか掲示板の投稿とかをウェブブラウザ上で書くのはめんどくさい。Emacs上で書きたいのである。というか、Emacs以前に「メール」とか「掲示板」とかいう時点ですでに老害感が横溢しており我ながらびびった。 それはさておき、そういうとき一昔前だとウェブブラウザ側にEdit with Emacsというアドイン、Emacs側に edit-server.el というのを入れて使っていたのだが、設定が複雑で何かとうまく行かなかった覚えがある。これが最近だと、ブラウザ側はGhostTextアドイン、Emacs側にatomic-chromeを入れれば楽に実現できる。名前がatomでchromeって大丈夫なのかねという感じだが（Atomはディスコンになってしまったし）、AtomやChromeだけではなくEmacsにもMozilla Firefo
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでtextareaの入力内容で高さを自動調整する方法をご紹介しています。 では、解説していきます。 本記事で作成するもの 本記事の内容で完成するものがこちら！textareaに値を入力していくと、スクロールバーが表示される行数になった場合にtextareaの高さが自動的に調整されるようになっています。実際に操作してみてください。 See the Pen 6153 by ryohei (@intotheprogram) on CodePen. 注意点としては、textareaの高さを右下の角からマウス等でリサイズすると、幅は維持できますが高さは入力内容に応じて自動で調整されます。その点だけご認識ください。 では、作成していきましょう！ textareaの要素を作成する HTMLでtextareaを作成しま
特殊文字をアンエスケープしたいと思って、もろもろ調べました。 Mozillaのサイトによると、 < 👉 < > 👉 > " 👉 " ' 👉 ' & 👉 &こちらの5文字が特殊文字として挙げられています。 developer.mozilla.org 最小の構成であれば、この5文字をreplaceすることでアンエスケープすればOKなのかもしれません。 念の為、他の人が作ったライブラリ、unescape-htmlというパッケージのソースを確認してみると、 'use strict' /** * un-escape special characters in the given string of html. * * @param {String} html * @return {String} */ module.exports = functio
こんにちは！ 最近はJSを使わないとできなかったことがCSSだけで完結する。ということも多くなってきましたよね！ 個人的に、「入力に応じて大きさが変わるtextarea(以下「可変textarea」)」は、JSでコネコネする必要があり、 めんどくさい実装 思ってるより大変な実装TOP10くらいには入ります🤔 そんなめんどくさい実装 思ってるより大変な実装 である可変textareaが、CSS一発で実装できるようになりそうで、ワクワクしたので紹介したいと思います！ 今はどう実装する？ そもそもどういったUIを実現したいのか、YamadaUI を例にお借りして説明したいと思います。 YamadaUI で言うところの、autosizeを有効にした時のUIが今回実現したいUIです。 このUIを実現するために、YamadaUIでは以下のようなコードでtextareaのサイズを制御しています。 te
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHubのコード表示部分はtextareaとbefore疑似要素でできている - hogashi.*
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
textareaをカスタマイズできるReact用のライブラリを作成しました
OverType - The Markdown Editor That's a Textarea
input, textarea中のキャレット座標 (カーソルの位置) を取得する
HTML：textareaの拡大/縮小を禁止し、サイズを固定する方法 | WWWクリエイターズ
GmailなどのtextareaをEmacsで編集する - Qiita
GmailなどのtextareaをEmacsで編集する - mhatta's mumbo jumbo
【JavaScript】textareaの入力内容で高さを自動調整する
textareaを使ってHTMLの特殊文字をアンエスケープする 📝 - みかづきブログ・カスタム
【field-sizing】さよならJS。入力に応じて大きさが変わるtextareaをCSSだけで実装する。
mainichi.jp
news.livedoor.com
x.com
tech.sumzap.co.jp
note.com/maznaga
www.rheos.jp