私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.133 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
ロケットみたいに人が乗れて宇宙に行ける乗り物を作ろうと思います。
どうやれはいいですか？
どうやれはいいですか？
入り組んでませんよ
ただリンクするだけです
ただかなり前に同じようなことをやった時には、
contenteditableな要素のHTMLを、単純に置換して置き換えるだけだと、
カーソルの位置がリセットされてしまった記憶があります
それで
A cross-browser JavaScript range and selection library.
http://github.com/timdown/rangy
これを使って実装したのです
ただ、どういう実装だったのかすっかり忘れてしまいましたし、
このライブラリも2015年で更新が止まっているので、
今なら今のやり方があるんじゃないかと思ったのです
ただリンクするだけです
ただかなり前に同じようなことをやった時には、
contenteditableな要素のHTMLを、単純に置換して置き換えるだけだと、
カーソルの位置がリセットされてしまった記憶があります
それで
A cross-browser JavaScript range and selection library.
http://github.com/timdown/rangy
これを使って実装したのです
ただ、どういう実装だったのかすっかり忘れてしまいましたし、
このライブラリも2015年で更新が止まっているので、
今なら今のやり方があるんじゃないかと思ったのです
designModeは知ってたけどcontenteditableは知らなかったな
質問の実質はキャレット操作でしょ
キャレット位置は単純にかつ地道にカウントして記憶して戻すしかないでしょ
質問の実質はキャレット操作でしょ
キャレット位置は単純にかつ地道にカウントして記憶して戻すしかないでしょ
contenteditableのキャレット操作と
inputやtextareaのキャレット操作と、なんか違いがあるの？
inputやtextareaのキャレット操作と、なんか違いがあるの？
キャレットの位置はこないだも質問が出て大ゲンカになってなかった？
便乗で質問します
キャレット無しの場合、本来TEXTAREAやINPUTにキーボード入力するような操作を
DIV要素でやるにはどのような構成になるのでしょうか（googleドキュメントみたいなやつです）
TEXTAREAにキーボード入力したものをval()で取得してDIVにコピー、みたいなのではありません
さらに全角半角や漢字など（TEXTAREAへ入力できるものすべて）も判別したいです
keydown取得してkeyCodeで半角全角を振り分け→漢字などはスペースキーの監視で。
全角時にはバックスペースキー、半角切り替えも監視
など考えましたがそんなめんどくさい処理をしないといけないのか・・？と眉唾でした
（そのためのTEXTAREAやINPUTだと思いましたが）
例えばGoogleドキュメントなどはそういうめんどくさいキー監視をしているのでしょうか？
キャレット無しの場合、本来TEXTAREAやINPUTにキーボード入力するような操作を
DIV要素でやるにはどのような構成になるのでしょうか（googleドキュメントみたいなやつです）
TEXTAREAにキーボード入力したものをval()で取得してDIVにコピー、みたいなのではありません
さらに全角半角や漢字など（TEXTAREAへ入力できるものすべて）も判別したいです
keydown取得してkeyCodeで半角全角を振り分け→漢字などはスペースキーの監視で。
全角時にはバックスペースキー、半角切り替えも監視
など考えましたがそんなめんどくさい処理をしないといけないのか・・？と眉唾でした
（そのためのTEXTAREAやINPUTだと思いましたが）
例えばGoogleドキュメントなどはそういうめんどくさいキー監視をしているのでしょうか？
キー監視じゃIMEがどんな変換したかわからないから面倒如何の前に不可能でね
例えばhiddenしたTEXTAREAにフォーカスを当てて・・
みたいなことができればと、hiddenしたtextareaにfocusしてみましたが
TEXTAREA内の変更にまでは至りませんでした
>>508
たしかに・・
みたいなことができればと、hiddenしたtextareaにfocusしてみましたが
TEXTAREA内の変更にまでは至りませんでした
>>508
たしかに・・
textareaは表示のまま、potitionでwindowから見切れるように
ならできました
ただ、キーボード入力のプルダウンメニューが邪魔になりますが
ならできました
ただ、キーボード入力のプルダウンメニューが邪魔になりますが
ちなみに稚拙ですがこんな感じです
http://jsfiddle.net/5sgn8d8e/
http://jsfiddle.net/5sgn8d8e/
たしかにキャレット位置を保存しておいて、HTMLを書き換えてから戻す
みたいな処理だった気がします
で、すごーーく面倒くさかった記憶があります
RangeオブジェクトとかSelectionオブジェクトとか、
普段全く使わないようなオブジェクトを使って・・
しかもそれらのオブジェクトが異様に難解だった記憶があります
今もそれですかね～
みたいな処理だった気がします
で、すごーーく面倒くさかった記憶があります
RangeオブジェクトとかSelectionオブジェクトとか、
普段全く使わないようなオブジェクトを使って・・
しかもそれらのオブジェクトが異様に難解だった記憶があります
今もそれですかね～
一定の領域では泥臭い作業から逃げられん
論理的に必要なことはどうした考えても何度考えても必要
論理的に必要なことはどうした考えても何度考えても必要
div要素の内容が変更されたら、しかしそもそもdiv要素にどうやってキーボードから書き込むの、っていう話じゃないの>>515
隠しtextarea法が定石なの？
隠しtextarea法が定石なの？
定石なんて無い
それでバリアがある環境や、ガラケーみたいなテキスト編集環境に対応できるかは分からんし
一般論としてできる限り細かい調整はしないで諦めたほうが良い
それでバリアがある環境や、ガラケーみたいなテキスト編集環境に対応できるかは分からんし
一般論としてできる限り細かい調整はしないで諦めたほうが良い
Electron アプリの、VS Code では、半角文字で入力補完が出る
Electron とか使わないと無理なのかも
Electron とか使わないと無理なのかも
>>517
div要素を編集可能にするだけじゃん
div要素を編集可能にするだけじゃん
ぐぐったらcaret.jsというのがあるみたいだけど
http://jsfiddle.net/sbrqvc2q/
http://jsfiddle.net/sbrqvc2q/
そういうのあるんですね
ありがとうございます
ただ要素中のHTMLを書き換えてキャレットを戻せばいいと思っていましたが
よく考えると文字を一文字書き加えるごとに全領域を書き換えるエディタなんてないわけで
テキストノードの中に潜って文字のレベルで操作する必要があると思います
そのためのオブジェクトがRangeオブジェクトだったと思います
面倒くさいですが、面倒くさい方法しかないなら、するしか仕方ないですね・・
ありがとうございます
ただ要素中のHTMLを書き換えてキャレットを戻せばいいと思っていましたが
よく考えると文字を一文字書き加えるごとに全領域を書き換えるエディタなんてないわけで
テキストノードの中に潜って文字のレベルで操作する必要があると思います
そのためのオブジェクトがRangeオブジェクトだったと思います
面倒くさいですが、面倒くさい方法しかないなら、するしか仕方ないですね・・
改行ごとにspanやpで区切るなどして部分的な指定をしやすくすれば、
HTMLの書き換えでもいいのかもしれません
ただ、何か問題があったから前回そうしなかったのではないか、という気もします
HTMLの書き換えでもいいのかもしれません
ただ、何か問題があったから前回そうしなかったのではないか、という気もします
SelectionオブジェクトとRangeオブジェクトには、
ひととおりの API が定義されていますが、あまり使われていません。
本書でも解説しません。
（…）
Webアプリケーション上でリッチテキスト編集機能が必要な場合は、
ブラウザ間での差異を吸収してくれる既存のソリューションを適用するとよいでしょう。
インターネット上を探せば、そのようなエディタ部品がたくさん転がっています。
名著と名高いサイ本も、リッチテキスト編集周辺はそっけない記述＆放り投げです
「たくさん転がっています」って、
これはそういうエディタ部品を作りたい人が読む本じゃないのかと問い詰めたいです
ひととおりの API が定義されていますが、あまり使われていません。
本書でも解説しません。
（…）
Webアプリケーション上でリッチテキスト編集機能が必要な場合は、
ブラウザ間での差異を吸収してくれる既存のソリューションを適用するとよいでしょう。
インターネット上を探せば、そのようなエディタ部品がたくさん転がっています。
名著と名高いサイ本も、リッチテキスト編集周辺はそっけない記述＆放り投げです
「たくさん転がっています」って、
これはそういうエディタ部品を作りたい人が読む本じゃないのかと問い詰めたいです
>>525
テキストエディタの作り方って本があると思ってんの？
テキストエディタの作り方って本があると思ってんの？
>>527
var ary = [1, 2, 3, 4];
console.log(ary.reduce((acc, n) => acc + `<b id="${n}">${n}</b>`, ''));
var ary = [1, 2, 3, 4];
console.log(ary.reduce((acc, n) => acc + `<b id="${n}">${n}</b>`, ''));
>>529
ありがとうございました！
ありがとうございました！
>>529
console.log(ary.reduce((acc, n) => acc + `<b id="${n}">${n}</b>`, ''));
console.log(ary.map(n => `<b id="${n}">${n}</b>`).join(''));
上の方を選んだ理由は？
console.log(ary.reduce((acc, n) => acc + `<b id="${n}">${n}</b>`, ''));
console.log(ary.map(n => `<b id="${n}">${n}</b>`).join(''));
上の方を選んだ理由は？
どっちでもいいけど新しい配列ちゃん生んですぐ殺すとかかわいそうやん
そんな無理にmapだのコールバックだの使わなくとも
昔っからある
(''+ary).replace(/(\d+),?/g,'<b id="$1">$1</b>')
でいいじゃん
昔っからある
(''+ary).replace(/(\d+),?/g,'<b id="$1">$1</b>')
でいいじゃん
jsは昔っからコールバック使うが。
そういう言語だ。
pythonとかから来た人かな？
そういう言語だ。
pythonとかから来た人かな？
あ？昔から？ JavaScriptでmapやreduceが
使えるようになったのはIE9からなんだが？
昔はそんなコード書いてねーよ
使えるようになったのはIE9からなんだが？
昔はそんなコード書いてねーよ
IE以外はネスケしかないって時代を知らんのだろうなｗ
それでよく昔からなんて言えたものだ
それでよく昔からなんて言えたものだ
昔から使うsetTimeoutもcallbackだな
callbackが昔から使われていることと、replace()が昔からあることは別だが
callbackで配列や文字列操作する関数って昔からあったっけ？
callbackが昔から使われていることと、replace()が昔からあることは別だが
callbackで配列や文字列操作する関数って昔からあったっけ？
>>535
そんなんだから君には成長がないんだよ
そんなんだから君には成長がないんだよ
自演で誤魔化し乙ｗ
「昔からある～でいいじゃん」とか言ってるくせに人には君には成長がないｷﾘｯとか笑うｗｗ
「昔からある～でいいじゃん」とか言ってるくせに人には君には成長がないｷﾘｯとか笑うｗｗ
何が言いたいんだこいつ
喧嘩したいだけのJS無関係レスは他所でやれ
喧嘩したいだけのJS無関係レスは他所でやれ
>>533
無理に正規表現を使わずとも、昔からあるfor文でいいじゃん
for (var i = 0, l = ary.length, s = ''; i < l; ++i) {
s += '<b id="' + ary[i] + '">' + ary[i] + '</b>';
}
無理に正規表現を使わずとも、昔からあるfor文でいいじゃん
for (var i = 0, l = ary.length, s = ''; i < l; ++i) {
s += '<b id="' + ary[i] + '">' + ary[i] + '</b>';
}
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.113 + (1001) - [97%] - 2014/1/25 12:46
- + JavaScript の質問用スレッド vol.135 + (1002) - [97%] - 2018/11/23 10:30
- + JavaScript の質問用スレッド vol.123 + (1002) - [97%] - 2015/4/27 23:30
- + JavaScript の質問用スレッド vol.130 + (974) - [97%] - 2016/10/26 14:18
- + JavaScript の質問用スレッド vol.113 + (1001) - [97%] - 2014/3/15 21:30
- + JavaScript の質問用スレッド vol.131 + (1000) - [97%] - 2017/1/25 8:01
- + JavaScript の質問用スレッド vol.130 + (1001) - [97%] - 2017/11/25 20:45
- + JavaScript の質問用スレッド vol.131 + (1004) - [97%] - 2018/3/7 13:30
- + JavaScript の質問用スレッド vol.132 + (1001) - [97%] - 2018/4/19 11:00
- + JavaScript の質問用スレッド vol.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.123 + (966) - [97%] - 2020/10/20 2:30
- + JavaScript の質問用スレッド vol.136 + (1001) - [97%] - 2019/1/8 11:30
- + JavaScript の質問用スレッド vol.139 + (1001) - [97%] - 2019/5/27 15:15
- + JavaScript の質問用スレッド vol.137 + (1003) - [97%] - 2019/3/26 11:46
- + JavaScript の質問用スレッド vol.143 + (753) - [97%] - 2020/4/19 5:00
- + JavaScript の質問用スレッド vol.103 + (1001) - [97%] - 2012/11/9 15:30
- + JavaScript の質問用スレッド vol.138 + (1004) - [97%] - 2019/4/20 23:45
トップメニューへ / →のくす牧場書庫について