のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,432,527人
頁
昨日:no data人
頁
今日:人
頁
最近の注目
人気の最安値情報

元スレ+ JavaScript の質問用スレッド vol.133 +

JavaScript覧 / PC版 /
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで

501 = :

ロケットみたいに人が乗れて宇宙に行ける乗り物を作ろうと思います。
どうやれはいいですか？

502 = :

東大阪の町工場に聞いてくれ

503 = :

入り組んでませんよ
ただリンクするだけです
ただかなり前に同じようなことをやった時には、
contenteditableな要素のHTMLを、単純に置換して置き換えるだけだと、
カーソルの位置がリセットされてしまった記憶があります
それで
A cross-browser JavaScript range and selection library.
http://github.com/timdown/rangy
これを使って実装したのです
ただ、どういう実装だったのかすっかり忘れてしまいましたし、
このライブラリも2015年で更新が止まっているので、
今なら今のやり方があるんじゃないかと思ったのです

504 = :

designModeは知ってたけどcontenteditableは知らなかったな

質問の実質はキャレット操作でしょ
キャレット位置は単純にかつ地道にカウントして記憶して戻すしかないでしょ

506 = :

キャレットの位置はこないだも質問が出て大ゲンカになってなかった？

507 = :

便乗で質問します
キャレット無しの場合、本来TEXTAREAやINPUTにキーボード入力するような操作を
DIV要素でやるにはどのような構成になるのでしょうか（googleドキュメントみたいなやつです）

TEXTAREAにキーボード入力したものをval()で取得してDIVにコピー、みたいなのではありません
さらに全角半角や漢字など（TEXTAREAへ入力できるものすべて）も判別したいです

keydown取得してkeyCodeで半角全角を振り分け→漢字などはスペースキーの監視で。
全角時にはバックスペースキー、半角切り替えも監視
など考えましたがそんなめんどくさい処理をしないといけないのか・・？と眉唾でした
（そのためのTEXTAREAやINPUTだと思いましたが）
例えばGoogleドキュメントなどはそういうめんどくさいキー監視をしているのでしょうか？

508 = :

キー監視じゃIMEがどんな変換したかわからないから面倒如何の前に不可能でね

509 = :

例えばhiddenしたTEXTAREAにフォーカスを当てて・・
みたいなことができればと、hiddenしたtextareaにfocusしてみましたが
TEXTAREA内の変更にまでは至りませんでした

>>508
たしかに・・

511 = :

ちなみに稚拙ですがこんな感じです
http://jsfiddle.net/5sgn8d8e/

512 = :

たしかにキャレット位置を保存しておいて、HTMLを書き換えてから戻す
みたいな処理だった気がします
で、すごーーく面倒くさかった記憶があります
RangeオブジェクトとかSelectionオブジェクトとか、
普段全く使わないようなオブジェクトを使って・・
しかもそれらのオブジェクトが異様に難解だった記憶があります
今もそれですかね～

513 = :

>>495
jQueryのtext()では、タグがエスケープされるけど、
html()では、タグも有効になる

要素の内容が変更されたら、change イベントが発行される

正規表現を使う

514 = :

一定の領域では泥臭い作業から逃げられん
論理的に必要なことはどうした考えても何度考えても必要

515 = :

>>507
要素の内容が変更されたら、jQuery のchange イベントが発行される

他には、keypress イベントとか

517 = :

div要素の内容が変更されたら、しかしそもそもdiv要素にどうやってキーボードから書き込むの、っていう話じゃないの>>515
隠しtextarea法が定石なの？

518 = :

定石なんて無い
それでバリアがある環境や、ガラケーみたいなテキスト編集環境に対応できるかは分からんし
一般論としてできる限り細かい調整はしないで諦めたほうが良い

519 = :

>>515
自己レス

jQuery のchange, keypress イベントでは、うまくいかなかった

521 = :

>>517
div要素を編集可能にするだけじゃん

523 = :

そういうのあるんですね
ありがとうございます
ただ要素中のHTMLを書き換えてキャレットを戻せばいいと思っていましたが
よく考えると文字を一文字書き加えるごとに全領域を書き換えるエディタなんてないわけで
テキストノードの中に潜って文字のレベルで操作する必要があると思います
そのためのオブジェクトがRangeオブジェクトだったと思います
面倒くさいですが、面倒くさい方法しかないなら、するしか仕方ないですね・・

524 = :

改行ごとにspanやpで区切るなどして部分的な指定をしやすくすれば、
HTMLの書き換えでもいいのかもしれません
ただ、何か問題があったから前回そうしなかったのではないか、という気もします

525 = :

SelectionオブジェクトとRangeオブジェクトには、
ひととおりの API が定義されていますが、あまり使われていません。
本書でも解説しません。
（…）
Webアプリケーション上でリッチテキスト編集機能が必要な場合は、
ブラウザ間での差異を吸収してくれる既存のソリューションを適用するとよいでしょう。
インターネット上を探せば、そのようなエディタ部品がたくさん転がっています。

名著と名高いサイ本も、リッチテキスト編集周辺はそっけない記述＆放り投げです
「たくさん転がっています」って、
これはそういうエディタ部品を作りたい人が読む本じゃないのかと問い詰めたいです

526 = :

>>525
テキストエディタの作り方って本があると思ってんの？

528 = :

>あまり使われていません。

ガリガリ使っとるがな

529 = :

>>527
var ary = [1, 2, 3, 4];
console.log(ary.reduce((acc, n) => acc + `<b id="${n}">${n}</b>`, ''));

530 = :

>>529
ありがとうございました！

531 = :

>>529
console.log(ary.reduce((acc, n) => acc + `<b id="${n}">${n}</b>`, ''));
console.log(ary.map(n => `<b id="${n}">${n}</b>`).join(''));


上の方を選んだ理由は？

532 = :

どっちでもいいけど新しい配列ちゃん生んですぐ殺すとかかわいそうやん

533 = :

そんな無理にmapだのコールバックだの使わなくとも
昔っからある
(''+ary).replace(/(\d+),?/g,'<b id="$1">$1</b>')
でいいじゃん

534 = :

ループさせますが何か

535 = :

>>533
お前が正規表現に慣れてるだけだろｗｗｗｗ
知らんやつにはそっちのほうが宇宙語だろｗ

536 = :

中途半端に新作作るならいっそリメイクの方が売れると思う

537 = :

jsは昔っからコールバック使うが。
そういう言語だ。
pythonとかから来た人かな？

538 = :

あ？昔から？ JavaScriptでmapやreduceが
使えるようになったのはIE9からなんだが？
昔はそんなコード書いてねーよ

539 = :

IEをサポート対象外としてきたものは幸福である

540 = :

IE以外はネスケしかないって時代を知らんのだろうなｗ
それでよく昔からなんて言えたものだ

541 = :

>>538
おまえ頭湧いてんのかｗｗｗ
コールバックって言ってんだろｗｗｗｗ
コールバック使うのはmapreduceの専売特許じゃねーんだよアホｗｗｗｗｗ

542 = :

昔から使うsetTimeoutもcallbackだな
callbackが昔から使われていることと、replace()が昔からあることは別だが

callbackで配列や文字列操作する関数って昔からあったっけ？

543 = :

>>535
そんなんだから君には成長がないんだよ

544 = :

はぁ？去年から10kgは成長しとるで？

545 = :

もう成長する毛髪もないクセに・・・

546 :

自演で誤魔化し乙ｗ
「昔からある～でいいじゃん」とか言ってるくせに人には君には成長がないｷﾘｯとか笑うｗｗ

547 = :

何が言いたいんだこいつ
喧嘩したいだけのJS無関係レスは他所でやれ

548 = :

>>533
無理に正規表現を使わずとも、昔からあるfor文でいいじゃん

for (var i = 0, l = ary.length, s = ''; i < l; ++i) {
s += '<b id="' + ary[i] + '">' + ary[i] + '</b>';
}

549 = :

これが見慣れてるな

550 = :

ループ外で使うsをループ初期化部で宣言するのは駄目じゃないか


←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

類似してるかもしれないスレッド

トップメニューへ / →のくす牧場書庫について