Freecodecamp: コードエディタでカーソルがランダムにジャンプします。

これは再現できませんでした。

お使いのデバイス/ブラウザに関する詳細情報を教えてください。 チャレンジが読み込まれるとすぐにエディター内に入力できます。エディターは自動的にフォーカスを取得し、Enterキーを押す必要はありません。

セットアップに固有の問題である可能性があります。

私はエディターで同じ問題を抱えていると思います。

たとえば、この演習（下の画像を参照）では、Enterキーを押す前にコードの一部に焦点を合わせることができません（マウスでもキーボードでも）。 54行目の下のどこをクリックしても、カーソルは54行目の先頭にジャンプします。コード内の任意の場所で「Enter」を1回押すと、すべて正常に機能します。

Windows 10で最新バージョンのChromeを実行しています。これまでのほとんどの演習で、この問題に気づきました。

どんな運動をしていても、smlabtと同じ問題があります。 Windows10でFirefoxを使用しています。

56行目の入力>それは機能しますか

この問題を抱えている人は、ブラウザ、OS、および最初にこれを経験したチャレンジを投稿してください。 可能であれば、問題のGIFのビデオが非常に役立ちます。 この情報がないと、問題を修正できません。

私が言ったように、私はWindows10でChromeを使用しています。
小さいウィンドウで問題を再現してみてください。 この動作は、改行が原因である可能性があると想像できます。
できるだけ早くgifを作成しようと思います。

@smlabtは、私が正常に再現したgifについて心配する必要はありません。 お手伝いありがとう！

一部のタスクでは、カーソルが最後の行まで移動せず、上の3〜5行の前にカーソルが下がらなくなったため、完了するために上のスペースを作成する必要がありました（主にhtml-cssタスクで発生しました）
私のユーザーエージェントはMozilla / 5.0（Windows NT 6.3; WOW64）AppleWebKit / 537.36（KHTML、Geckoなど）Chrome / 49.0.2623.112 Safari / 537.36 @BKinahan

これを初めて使用すると、この使いやすさが最初に気づきました。 これは、JavaScriptパスでこれまでに試したすべての課題に当てはまります。 コードウィンドウにアクセスする唯一の方法は、クリックすることです。これは、説明パネルをスクロールする場合にも当てはまります。

Mozilla / 5.0（Macintosh; Intel Mac OS X 10_9_5）AppleWebKit / 537.36（KHTML、Geckoなど）Chrome / 49.0.2623.112 Safari / 537.36

Code FreeCampでコーディングを学び始めたところです。 私は文字通り始めたばかりなので、問題の診断に助けを提供しようとしても少し不安です。

私が提供できるのは私の経験です。 ページをロードするたびに、コードウィンドウをクリックして、クリックした場所に入力しようとします。
入力する実際の場所は、最初にクリックした場所から少し下のところにあります（ランダムに表示されます）。

カーソルが下にジャンプできなかったのは、エディターの最初の行をクリックしたときだけでした。 ページが読み込まれたときに開始するもの。

（編集）
私も追加したかった。 この問題は、「 https://www.freecodecamp.com/challenges/create-a-bootstrap-headline 」から始まる問題ではないようです。
しかし、前のレッスンに戻ると、それでも問題が発生します。

これが私が使用する修正です：

カーソルが応答しなくなったら、コードの最後の行まで下にスクロールします。通常、空白行があります。

空白行にカーソルを置き、「削除」または「バックスペース」を使用して、テキストが表示されている行にカーソルを移動します。

これで、カーソルはこのチャレンジで正常に機能します。

チャレンジ＃35以降、Windows 10でChromeを使用してこの問題が発生しています。この問題は、断続的に発生します。 また出会ったら録音します。

ここで同じ問題があります

同じ問題。 Windows8.1で最新のChromeを使用する。 それがどのチャレンジで始まったかを正確に覚えていませんが、私の推測では30〜35の間のどこかになります。

同じことがモバイルでも一度起こりました。

このバグの良いデモンストレーションではありませんが、カーソルが1行スキップするGIFを作成することができました。

皆様のご報告ありがとうございます。
数日前にCodeMirrorを更新しました（https://github.com/FreeCodeCamp/FreeCodeCamp/pull/8737を参照）。うまくいけば、この問題はその更新で解決されます。 終了しますが、 @ sadathanwar17で問題を再現できる場合は、お気軽に再開してください。ありがとうございます。

---

貢献のための

---

@ sadathanwar17 @bugronこのバグはまだアクティブであるように思われます。 https://www.freecodecamp.com/challenges/create-a-text-fieldで再現でき

• Chrome 50.0.2661.102
• Macintosh OS X 10.11.2
• ブラウザのサイズ1680x 952
• 画面解像度1680x 1050

ありがとう@ sadathanwar17！
はい、私はまだ時々これを再現することができます。 また、別の問題からも確認されています。

再開。

今も私に起こっています。 これが役立つかどうかはわかりませんが、上記の誰かが言ったように、運動30〜35の頃までは始まりませんでした（私はそれを探していなかったので、非常に大まかな見積もりです）。 たぶん、コードの長さや行数がどういうわけかそれに影響します。 最初の一握りは問題なく動作しましたが、エディターの下部に移動すると（その後、スクロールバーが表示されました）、それが気づき始めました。 ただランダムな考え。

@mbrannonに同意する必要があります。「ボタン情報を使用してオプションのアクションを呼び出す」とその周辺のページで取得しています。55行目の先頭より下にあるものを選択できず、クリックした場所から近くの場所にカーソルがランダムにジャンプします。

私はdmattとまったく同じ問題を抱えています。 一部の行の列を選択できません。 列の選択可能性がその後の行に依存しているように見えるため、コードと許可された行が「ずれている」ように見えます。

Surface pro3の最新バージョンのChromeでWindows10を実行する

同じ問題がまだ発生しています-Windows10で最新のGoogleChromeを実行しています。

+1
私は、これまでの最初のHTMLレッスンのすべての演習で人々が話し合っていると思うのと同じ問題を抱えています。 問題＃8226は問題を説明するのに良い仕事をしていると思います。

私は今まで同じ問題を抱えているので、彼らはこの問題に取り組んでいないようです。 そして私は昨日FCCに参加しました。

+1の問題が断続的に発生し、更新が役立つ場合があります。 任意の文字を入力してから削除すると、そのチャレンジが一時的に修正されます

これは行の折り返しが原因だと思います。行が折り返されなくなるまでページズームを変更すると、問題が解決します。
たぶん私たちはただ包むべきではありません...

この問題は非常に厄介です。トップdivからCodeMirror-wrapクラスを削除すると、問題が修正されるようです。
<div class="CodeMirror cm-s-monokai CodeMirror-wrap" style="width: 100%; height: auto;">

https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/client/commonFramework/create-editor.js#L22
lineWrapping：true、

@heldersepuは詳細な分析に感謝しますが、これは非常にトリッキーなバグです。ラッピングを削除してネイティブスクロールバーを追加すると、エディターが奇妙な方法でレンダリングされます。

おそらくそれは修正できるかもしれませんが、もっと退屈な部分は、ローカルセットアップでこれをもう再現できないように見えることです。

それはまだプロダクション（メインのウェブサイト）にあります。

必要に応じて、最終的な修正を加えて、遠慮なくプルリクエストを行ってください。
もう一度ありがとう。

コードエディタの最後の行の終わりに移動し、1文字を削除（バックスペースなし）したスクリプトを作成した場合はどうなりますか？ その後、ユーザーはカーソルを好きな場所に配置できるようになります...今のところ修正するだけですか？

正直なところ、行の折り返しに値は表示されません...
自分次第だとしたら、ラップを無効にして、スクロールバーを忘れてしまいます。
2016年6月16日午前8時43分、「MrugeshMohapatra」 [email protected]
書きました：

@heldersepuhttps ： //github.com/heldersepu詳細に感謝し
分析、しかし、私がラッピングを削除して、これは本当にトリッキーなバグです
エディターが奇妙な方法でレンダリングされるネイティブスクロールバーを追加します。

修正できるかもしれませんが、もっと面倒なのは修正できないことです
私のローカル設定ではもうこれを再現しているようです。

それはまだプロダクション（メインのウェブサイト）にあります。

必要に応じて、最終的な修正を加えて、遠慮なくプルリクエストを行ってください。
もう一度ありがとう。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment -226473258、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe/AAhSwiySJLjhb0l-M78ZmGbh69lo4rNQks5qMUTjgaJpZM4H91tE
。

@leonsegalは、問題を修正する1行のスクリプトです。
$(".CodeMirror-wrap").removeClass("CodeMirror-wrap")

@heldersepuええと、スクロールバーまたはラップのいずれかを使用できます。そうしないと、小さいビューポートでコードを参照できません。

@heldersepuなので、ページを使用するたびにブラウザでコードを手動で編集する必要がありますか？

@raisedadead完全に機能するローカル設定はありませんが、create-editor.jsを次のように変更できる場合：
lineWrapping: false,
CodeMirror-wrapなしでdivをレンダリングすることを確認してください。

しかし、これは他のメンテナと相談し、ある種の投票にかける必要があるものです。

@heldersepu私はまさにそれをしました。

まず、ラッピングを外しました。
lineWrapping: false

これにより、コードを水平方向に参照できなくなりました（長い行の場合）。
だから、私はスクロールバーを追加してみました
scrollbarStyle: 'native',

これにより、全体が非常に奇妙な方法でレンダリングされます。さらに、この問題はローカルセットアップでは再現できず、プッシュする前に修正をテストできなくなります。

@leonsegalは残念ながらそうです（最終的な修正が展開されるまで、私にはそれらの権利がないことに注意してください）それは私がそれを回避するために使用してきたものです。

@raisedadeadはコードを水平方向に閲覧できないことについて
長い行をクリックして[終了]キーを押すと、その行にたどり着くことができますか？
矢印キーで移動するのはどうですか？

いいえ、何も機能していないようです。マウスボタン、矢印キーは何もありません。

PSコントリビューターチャットルームでチャットを続けましょう。

コードが垂直スクロールを必要とするほど長くなったときに問題にほとんど気づいたと思いますが、行の折り返しの問題ではありません（間違っている可能性はありますが）。 ちょっとした考え。

調査結果を記録するためだけに：

• これはCodeMirrorコードエディタの問題です
• 回避策として、lineWrapを無効にして、simplescrollアドオンを使用できます。
  https://codemirror.net/demo/simplescrollbars.html

+1

+1

Firefox、Safari、Edge、Chrome、Vivaldi、Operaで試しましたが、この問題は引き続き機能します。

MacでChromev51 64ビット（最新バージョン）を使用していますが、同じ問題が発生します。

やあみんなこれは確認された問題です、確認のために代わりに最初の投稿の反応を親切に使ってください。

考えられる解決策のためだけに、スレッドをクリーンに保ちましょう。

同じ問題がまだ発生している
OS：Ubuntu
ブラウザ：Chromium

私にとってもまだ起こっています。 私にとっては60年代頃に始まったようです。

OS：Windows 10
ブラウザ：Firefox

誰かが長期的な回避策に興味があるなら、私は@heldersepuのスクリプトでこのChrome拡張機能を使用しました：$（ "。CodeMirror-wrap"）。removeClass（ "CodeMirror-wrap"）

Enter（改行を強制する）ではなく、スペースを使用してカーソルがどこにあるかを把握してきました。 私にとっては影響が少なかった。 いずれかの解決策が得られれば、FCC演習の「推奨ブラウザ」を楽しませるでしょう。

私は非常に早い段階からこの問題を経験しています。 私はちょうど100を打ちました。

OS：OSX
ブラウザ：ChromeとSafari

Chrome拡張機能をインストールする必要があるのではないかと思いますか？ Adblocker、Microsoft Rewards（判断しないでください）、Honey、Avast、Grammarly、Mightytextなどがあります。 （とはいえ、私はこれをSafariで経験しますが、これはめったに使用せず、意識的に拡張機能をインストールしていません）

@sethmchrisが提案した（ @helderspuが作成した）回避策は、トリックを実行したようです。 （ありがとう）

これは、誰かがローカルで複製しているのをまだ見たことがなく、まだ決定されていない条件に基づいて表示されているように見えるため、テストするのは困難です。 最善の行動は、いくつかの非破壊的な修正を追加して、修正されるかどうかを確認することだと思います。

ここにいくつかの観察があります：
1）おそらくreact-codemirrorはreactアップデートが公開されたときにこれを修正しますか？
2） simplescrollを使用するためのTypeError: CodeMirror.scrollbarModel[cm.options.scrollbarStyle] is not a constructorます。 現在、scrollbarStyleはnull設定されているため、おそらくnative設定する価値があります。 native設定しても、エディターを正しくロードできます。
3）このスレッドごとに、 create-editorファイルの40行目にeditor.refresh()を追加することをお勧めします。

ラップをfalseすることも機能する可能性があるという、上記の点から逸脱しないでください。 @raisedadeadが指摘したように、私たちはに同じ時間変更scrollbarStyleでない場合、それは横スクロールでエラーを引き起こすだろうと思うnativeの代わりにnull 。

こんにちは、私はこのプログラムに不慣れで、最初のチャレンジから同じ問題を経験しています。 特に、ロールに乗っているように感じて、これから何をしようとしているのかがわかっているように感じるときは、本当に迷惑ですが、カーソルが必要な場所に移動したくないため、すぐには何もできません。 。

誰かが解決策を持っているなら、それについて教えてください、私はそれを大いに感謝します。

事前にありがとう

@ arias93jordyいくつかの投稿@sethmchrisが回避策を投稿し

ありがとう@sethmchris！ この解決策は私のために働いた。

@sethmchris私はあなたの解決策を試しましたが、それは私のために機能していません...それはミラーラッピング機能を無効にしますが、カーソルはそれでもそれが望むことをします:(多分私はそれを間違っていますか？私は単に拡張機能をインストールしてあなたの部分をコピーして貼り付けましたコードを記述し、FCC Webサイトで拡張機能を有効にしました...不足しているものはありますか？

Windows 10、Chromeバージョンバージョン54.0.2840.71m。

レッスンでロードされたコードサンプルに、次の行に折り返すのに十分な長さの行が含まれていると、バグが発生することに気付きました。 すべての行が短い場合は問題ありません。

一番上の行（位置0、行0）に移動し、Deleteキーを1回押すと、問題が解決するようです。

はい、ありがとうございます！

3時34分AMの火、2016年11月1日には、svershin [email protected]は書きました：

Windows 10、Chromeバージョンバージョン54.0.2840.71m。

コードサンプルをロードすると、バグが発生することに気づきました。
レッスンには、次のレッスンに折り返すのに十分な長さの行が含まれています
ライン。 すべての行が短い場合は問題ありません。

一番上の行（位置0、行0）に移動し、Deleteキーを1回押すと
問題を解決します。

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment -257534503、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ASTtQD6EtjYcLsMBHxY45d5-uEbIq5Zqks5q5xWfgaJpZM4H91tE
。

GoogleChrome-11 / 11/16にオープンを確認しました。

再現する手順：
1.）[https://www.freecodecamp.com/challenges/center-text-with-bootstrap]など、長い行を含むコードエディタを使用して任意のページを読み込みます
2.）行が折り返されるサイズにページを縮小します。
3.）ページのハードリフレッシュを実行します。
4.）エディターの右側をクリックします。
5.）観察してください、キャレットはしばしば行の終わりに移動しません。

やあみんなこれは確認された問題です、確認のために代わりに最初の投稿の反応を親切に使ってください。

考えられる解決策のためだけに、スレッドをクリーンに保ちましょう。

ChromeだけでなくEdgeブラウザでも問題を再現できます。 それを停止させるために（現在のチャレンジの場合のみ）、ズームアウトしてからズームインします。それはひどいですが、私にとってはうまくいきます。

ここで@erictleungが参照しているように、この問題がました

なんらかの理由で、問題が解決するまで、誰かがそれに応答したという電子メール通知を受け取りませんでした。

Enterキーを押すと、修正されるようです

私は同じ問題を抱えています：

1. クリックやキーボードの矢印ではなく、一部の領域にカーソルを置くことができません
2. 何かを削除しようとすると、カーソル位置が正しくないなど、他のものが削除されます

これはクロムとFirefoxで起こります
更新：今回は「コードのリセット」ボタンが役立ちましたが、特定の1つの課題でのみ.....次の課題では、問題が再現されます....コードを再度リセットする必要があり、新しいコードで毎回発生しますチャレンジ。

@mrgizmoありがとうます。https： //github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment-260019777を参照して

このスレッドでの会話を一時的に共同編集者のみにロックしました。これはステージングで解決されており、まもなく公開されます。

修正はベータ版のWebサイトで確認できます。

現在本番Webサイトにある回避策は次のとおりです。
チャレンジエディタのEnterキーを押してから、チャレンジを続行します。

ご不便をおかけして申し訳ございません。

サポートが必要な場合は、チャットルームでお問い合わせください。