caretposition.js - テキストエリアの文字入力位置を取得 MOONGIFT

暮らしカテゴリーの変更を依頼記事元:

www.moongift.jp

7 usersがブックマークコメント

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

<iframe marginwidth="0" marginheight="0" src="https://b.hatena.ne.jp/entry.parts?url=https%3A%2F%2Fwww.moongift.jp%2F2018%2F01%2Fcaretposition-js-%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E3%2582%25A8%25E3%2583%25AA%25E3%2582%25A2%25E3%2581%25AE%25E6%2596%2587%25E5%25AD%2597%25E5%2585%25A5%25E5%258A%259B%25E4%25BD%258D%25E7%25BD%25AE%25E3%2582%2592%25E5%258F%2596%25E5%25BE%2597%2F" scrolling="no" frameborder="0" height="230" width="500"><div class="hatena-bookmark-detail-info"><a href="https://www.moongift.jp/2018/01/caretposition-js-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AE%E6%96%87%E5%AD%97%E5%85%A5%E5%8A%9B%E4%BD%8D%E7%BD%AE%E3%82%92%E5%8F%96%E5%BE%97/">caretposition.js - テキストエリアの文字入力位置を取得 MOONGIFT</a><a href="https://b.hatena.ne.jp/entry/s/www.moongift.jp/2018/01/caretposition-js-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%AE%E6%96%87%E5%AD%97%E5%85%A5%E5%8A%9B%E4%BD%8D%E7%BD%AE%E3%82%92%E5%8F%96%E5%BE%97/">はてなブックマーク - caretposition.js - テキストエリアの文字入力位置を取得 MOONGIFT</a></div></iframe>

プレビュー

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

caretposition.js - テキストエリアの文字入力位置を取得 MOONGIFT

最近、テキストエリアを拡張するようなライブラリが増えています。その一つに入力補完機能が挙げられま... 最近、テキストエリアを拡張するようなライブラリが増えています。その一つに入力補完機能が挙げられます。IDEではよく見られる機能ですが、入力箇所（キャレット）を正しく取得しないと、逆に文字入力を妨げることになるでしょう。そこで使ってみたいのがcaretposition.jsです。テキストエリアにおけるキャレットの位置をXY座標で取得できます。 caretposition.jsの使い方デモです。左下にキャレットの座標が表示されています。こんな感じで入力中も変化しています。別なデモです。キャレットの位置に入力補完用のラベルを表示しています。入力した後に戻ってもちゃんと追従されます。 caretposition.jsを使うとキャレットの位置がXY座標で取れますので、後はそれを使ってCSSで情報を表示すればいいでしょう。日本語特有の文字変換にも追従するので様々な利用が考えられそうです。 c