のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,644,348人
頁
昨日: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一覧へ
    スレッド評価: スレッド評価について
    みんなの評価 :
    タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

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

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