Freecodecamp: 코드 편집기에서 커서가 무작위로 이동합니다.

나는 이것을 재현 할 수 없었다.

장치 / 브라우저에 대한 추가 정보를 제공 할 수 있습니까? 챌린지가로드되는 즉시 편집기에서 입력 할 수 있으며 Enter 키를 누르지 않고도 편집기가 자동으로 초점을 맞출 수 있습니다.

설정에 특정한 문제 일 수 있습니다.

편집자와 같은 문제가 있다고 생각합니다.

예를 들어이 연습에서는 (아래 이미지 참조) Enter 키를 누르기 전에 코드의 일부에 초점을 맞출 수 없습니다 (마우스 나 키보드 사용 안 함). 54 행 아래를 클릭해도 커서는 54 행의 시작 부분으로 바로 이동합니다. 코드의 아무 곳에서나 "enter"를 한 번 누르면 모든 것이 잘 작동합니다!

Windows 10에서 최신 버전의 Chrome을 실행하고 있습니다. 지금까지 대부분의 연습에서이 문제를 발견했습니다.

어떤 운동을하든 smlabt와 같은 문제가 있습니다. Windows 10에서 Firefox를 사용하고 있습니다.

라인 56 입력> 작동할까요?

이 문제가있는 사람은 브라우저, OS를 게시하고이 문제를 처음 경험 한 사람에게 도전하세요. 가능하다면 문제의 GIF 비디오가 매우 도움이 될 것입니다. 이 정보가 없으면 문제를 해결할 수 없습니다.

내가 말한 것처럼 Windows 10에서 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입니다.

처음으로 이것을 사용 하고이 사용성 문제가 내가 가장 먼저 눈치 챈 것입니다. 지금까지 자바 스크립트 경로에서 시도한 모든 도전에 대해 사실입니다. 코드 창으로 이동할 수있는 _only_ 방법은 클릭하는 것입니다. 이는 지침 패널을 스크롤하는 경우에도 마찬가지입니다.

Mozilla / 5.0 (Macintosh, Intel Mac OS X 10_9_5) AppleWebKit / 537.36 (Gecko와 같은 KHTML) Chrome / 49.0.2623.112 Safari / 537.36

방금 Code Free Camp에서 코딩을 배우기 시작했습니다. 말 그대로 막 시작했을 때 문제를 진단하는 데 도움을 주려고하는 것조차 조금 불안합니다.

제가 제공 할 수있는 것은 제 경험입니다. 페이지를로드 할 때마다 코드 창을 클릭하고 클릭 한 위치에 입력을 시도합니다.
입력하는 실제 위치는 내가 원래 클릭 한 위치에서 짧은 거리에 있습니다 (무작위로 보임).

커서가 아래로 이동하지 못한 유일한 경우는 편집기에서 첫 번째 줄을 클릭했을 때였습니다. 페이지가로드 될 때 시작되는 것입니다.

(편집하다)
나는 또한 추가하고 싶었다. 문제는 " https://www.freecodecamp.com/challenges/create-a-bootstrap-headline "에서 다시 시작되는 문제가 아닌 것 같습니다.
그러나 이전 수업으로 돌아 가면 여전히 문제입니다.

내가 사용하는 수정 사항은 다음과 같습니다.

커서가 응답하지 않으면 코드의 마지막 줄로 스크롤합니다. 일반적으로 빈 줄이 있습니다.

빈 줄에 커서를 놓고 "삭제"또는 "백 스페이스"를 사용하여 커서를 텍스트가있는 줄 위로 가져옵니다.

이제 커서가이 챌린지에 대해 잘 작동합니다.

Windows 10에서 Chrome을 사용하여 Challenge # 35 이후로이 문제가 발생했습니다.이 문제는 간헐적으로 지속됩니다. 다시 만나면 녹음하겠습니다.

여기에 같은 문제가있다

같은 문제. Windows 8.1에서 최신 Chrome 사용. 어떤 도전이 시작되었는지 정확히 기억하지 못하지만 내 추측은 30-35 사이입니다.

모바일에서도 마찬가지입니다.

이 버그에 대한 좋은 데모는 아니지만 커서를 한 줄 건너 뛰는 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
• 매킨토시 OS X 10.11.2
• 브라우저 크기 1680 x 952
• 화면 해상도 1680 x 1050

감사합니다 @ sadathanwar17!
예, 나는 여전히 이것을 재현 할 수 있습니다. 다른 문제에서도 확인되었습니다.

재개.

나에게도 지금 일어나고있다. 이것이 도움이되는지 모르겠지만 위에서 언급 한 사람처럼 운동 30-35 시경까지 시작되지 않았습니다 (내가 찾지 않았기 때문에 매우 대략적인 추정치). 아마도 코드의 길이나 줄의 수는 어떻게 든 그것에 영향을 미칠 것입니다. 첫 번째 한 줌은 잘 작동했지만 편집기의 맨 아래로 내려 가면 (그리고 스크롤 막대가 나타남), 바로 눈치 채기 시작했습니다. 그냥 무작위로 생각합니다.

@mbrannon 과 동의해야합니다. "버튼 정보를 사용하여 선택적 작업 호출"과 그 주변 페이지에 표시됩니다. 55 행 시작 아래에있는 항목을 선택할 수 없으며 커서가 클릭 할 때마다 근처 어딘가로 무작위로 이동합니다.

나는 dmatt와 똑같은 문제를 가지고 있습니다. 일부 행의 열을 선택할 수 없습니다. 코드와 허용 된 줄이 '잘못 정렬'된 것 같습니다. 열의 선택 가능성이 그 뒤의 줄에 의존하는 것처럼 보이기 때문입니다.

Surface Pro 3에서 최신 버전의 Chrome에서 Windows 10 실행

Windows 10에서 최신 Google Chrome을 실행하는 것과 같은 문제가 계속 발생합니다.

+1
나는 사람들이 지금까지 첫 번째 HTML 강의에서 모든 연습에서 논의하고 있다고 생각하는 동일한 문제를 가지고 있습니다. 나는 문제 # 8226이 문제를 잘 설명한다고 생각합니다.

나는 지금까지 같은 문제를 겪고 있기 때문에이 문제에 대해 일하지 않은 것 같습니다. 어제 FCC에 가입했습니다.

간헐적 인 +1 문제, 새로 고침이 때때로 도움이됩니다. 문자를 입력 한 다음 제거하면 문제가 해결됩니다.

나는 이것이 줄 바꿈으로 인한 것이라고 생각하며 줄이 줄 바꿈되지 않을 때까지 페이지 확대 / 축소를 변경하면 문제가 해결됩니다.
포장하지 말아야 할 것 같은데 ...

이 문제는 매우 성가 시며 최상위 div에서
<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, "Mrugesh Mohapatra" [email protected]
썼다 :

@heldersepu https://github.com/heldersepu 깊이 감사합니다
그러나 이것은 정말 까다로운 버그입니다.
편집기가 이상한 방식으로 렌더링되는 기본 스크롤바를 추가합니다.

고칠 수 있겠지만 더 지루한 부분은
내 로컬 설정에서 더 이상 재현하는 것 같습니다.

여전히 프로덕션 (메인 웹 사이트)에 있습니다.

원하는 경우 확실한 수정을 통해 풀 요청을 자유롭게 만드십시오.
다시 한번 감사합니다.

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment -226473258,
또는 스레드 음소거
https://github.com/notifications/unsubscribe/AAhSwiySJLjhb0l-M78ZmGbh69lo4rNQks5qMUTjgaJpZM4H91tE
.

@leonsegal 여기에 문제를 해결하는 한 줄 스크립트가 있습니다.
$(".CodeMirror-wrap").removeClass("CodeMirror-wrap")

@heldersepu 글쎄, 우리는 스크롤바 또는 랩을 가질 수 있습니다. 그렇지 않으면 더 작은 뷰 포트에서 코드를 탐색 할 수 없습니다.

@heldersepu 그래서 페이지를 사용할 때마다 브라우저에서 코드를 수동으로 편집해야합니까?

@raisedadead 나는 완전한 기능을 갖춘 로컬 설정이 없지만 create-editor.js를 다음과 같이 변경할 수 있다면
lineWrapping: false,
CodeMirror 랩없이 div를 렌더링하는지 확인하십시오.

그러나 이것은 다른 관리자들과상의해야 할 것입니다.

@heldersepu 정확히 그랬습니다.

먼저 포장을 제거하고
lineWrapping: false

이로 인해 코드를 가로로 탐색 할 수 없습니다 (긴 줄).
그래서 스크롤바를 추가해 보았습니다.
scrollbarStyle: 'native',

이것은 매우 이상한 방식으로 전체를 렌더링합니다. 게다가이 문제는 로컬 설정에서 재현 할 수 없기 때문에 푸시하기 전에 수정 사항을 테스트 할 수 없게됩니다.

@leonsegal 안타깝게도 그렇습니다.

@raisedadead 에 대해 가로로 코드를 탐색 할 수 없음
긴 줄을 클릭하고 [종료] 키를 누르면 해당 줄로 이동할 수 있습니까?
화살표 키로 이동하는 것은 어떻습니까?

아무것도 작동하지 않는 것 같습니다. 마우스 버튼, 화살표 키는 아무것도 없습니다.

PS Contributors Chat room 에서 채팅을 계속합시다.

나는 코드가 세로 스크롤을 필요로 할 정도로 길어 졌을 때 대부분의 문제를 발견했다고 생각합니다. 그냥 생각.

우리의 결과를 기록하기 위해 :

• 이것은 CodeMirror 코드 편집기의 문제입니다.
• 해결 방법으로 lineWrap을 비활성화하고 simplescroll 애드온을 사용할 수 있습니다.
  https://codemirror.net/demo/simplescrollbars.html

+1

+1

Firefox, Safari, Edge, Chrome, Vivaldi 및 Opera를 사용해 보았지만이 문제는 계속 작동합니다.

Mac에서 Chrome v51 64 비트 (최신 버전)를 사용하고 있지만 여전히 동일한 문제가 있습니다.

안녕하세요, 이것은 확인 된 문제입니다. 확인 대신 첫 번째 게시물의 반응을 친절하게 사용하십시오.

잠재적 인 솔루션에 대해서만 스레드를 깨끗하게 유지합시다.

같은 문제가 여전히 나타남
OS : 우분투
브라우저 : Chromium

나도 여전히 발생하고 있습니다. 60 년대 무렵부터 시작된 것 같습니다.

운영체제 : Windows 10
브라우저 : Firefox

장기적인 해결 방법에 관심이있는 사람이 있다면 @heldersepu 스크립트와 Chrome 확장 프로그램 을 사용했습니다. $ ( ". CodeMirror-wrap"). removeClass ( "CodeMirror-wrap")

나는 Enter (강제 줄 바꿈)와 달리 커서가 어디에 있는지 파악하기 위해 공백을 사용했습니다. 저에게 미치는 영향이 적습니다. FCC 연습 문제에 대한 해결책을 찾으면 "제안 된 브라우저"를 사용하겠습니다.

나는 아주 초기 운동 이후이 문제를 경험하고 있습니다. 방금 100을 쳤습니다.

운영체제 : OSX
브라우저 : Chrome 및 Safari

크롬 확장 프로그램을 설치하는 것과 관련이 있는지 궁금합니다. Adblocker, Microsoft Rewards (판단하지 마십시오), Honey, Avast, Grammarly, Mightytext가 있습니다. (즉, 나는 거의 사용하지 않으며 의식적으로 확장 프로그램을 설치하지 않은 Safari에서 이것을 경험합니다)

@sethmchris 의 제안 ( @helderspu 's created) 해결 방법은 트릭을 수행 한 것 같습니다. (감사)

이것은 누군가가 그것을 로컬에서 재현하는 것을 아직 보지 못했고 아직 결정되지 않은 조건을 기반으로 자신을 보여주는 것처럼 보이기 때문에 테스트하기가 어렵습니다. 최선의 조치는 몇 가지 비 브레이킹 수정을 추가하여 하나가 수정되는지 확인하는 것입니다.

다음은 몇 가지 관찰입니다.
1) 아마도 react-codemirror가 반응 업데이트가 실행될 때 이것을 고칠 것입니까?
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 웹 사이트에서 확장 기능을 활성화했습니다 ... 내가 놓친 것이 있습니까?

Windows 10, Chrome 버전 버전 54.0.2840.71 m.

강의와 함께로드 된 코드 샘플에 다음 줄로 넘길 수있을만큼 긴 줄이 포함되어있을 때 버그가 발생하는 것을 확인했습니다. 모든 줄이 짧으면 문제가 없습니다.

맨 위 줄 (위치 0, 줄 0)으로 이동하고 삭제를 한 번 누르면 문제가 해결되는 것 같습니다.

네 감사합니다!

2016 년 11 월 1 일 화요일 오전 3:34에 svershin [email protected] 은 다음과 같이 썼습니다.

Windows 10, Chrome 버전 버전 54.0.2840.71 m.

코드 샘플을로드 할 때 버그가 잘립니다.
강의에는 다음으로 줄 바꿈 할만큼 긴 줄이 있습니다.
선. 모든 줄이 짧으면 문제가 없습니다.

맨 위 행 (위치 0, 행 0)으로 이동하고 삭제를 한 번 누르는 것 같습니다.
문제를 해결합니다.

—
이 스레드를 구독했기 때문에이 메시지가 전송되었습니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment -257534503,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/ASTtQD6EtjYcLsMBHxY45d5-uEbIq5Zqks5q5xWfgaJpZM4H91tE
.

Google 크롬-2016 년 11 월 11 일에 검증 된 오픈입니다.

재현 단계 :
1.) [https://www.freecodecamp.com/challenges/center-text-with-bootstrap]과 같이 긴 줄이 포함 된 코드 편집기로 페이지를로드합니다.
2.) 줄 바꿈이되는 크기로 페이지를 축소합니다.
3.) 페이지의 하드 새로 고침을 수행합니다.
4.) 편집기의 오른쪽을 클릭합니다.
5.) 캐럿이 줄 끝으로 이동하지 않는 경우가 많습니다.

안녕하세요, 이것은 확인 된 문제입니다. 확인 대신 첫 번째 게시물의 반응을 친절하게 사용하십시오.

잠재적 인 솔루션에 대해서만 스레드를 깨끗하게 유지합시다.

Chrome뿐만 아니라 Edge 브라우저에서도 문제를 재현 할 수 있습니다. 중지하기 위해 (현재 챌린지에만 해당) 축소 한 다음 다시 확대합니다. 짜증나지만 저에게는 작동합니다.

@erictleung 에서 언급 한대로이 문제가 발생했습니다.

어떤 이유로 문제가 종결 될 때까지 누군가가 응답했다는 이메일 알림을받지 못했습니다.

Enter 키를 누르면 문제가 해결되는 것 같습니다.

동일한 문제가 있습니다.

1. 클릭이나 키보드 화살표가 아닌 일부 영역에 커서를 배치 할 수 없습니다.
2. 무언가를 삭제하려고하면 커서 위치가 잘못되는 등 다른 항목이 삭제됩니다.

이것은 Chrome 및 Firefox에서 발생합니다.
업데이트 : "리셋"코드 버튼이 이번에는 도움이되었지만 특정 문제에서만 문제가 발생합니다 ..... 다음 문제에서는 문제가 스스로 재현됩니다. 도전.

@mrgizmo 감사합니다, 참조하십시오 https://github.com/FreeCodeCamp/FreeCodeCamp/issues/7847#issuecomment -260019777

이 대화 목록의 대화를 공동 작업자에게만 임시로 잠 갔으며, 이는 준비 단계에서 해결되었으며 곧 제공 될 예정입니다.

베타 웹 사이트에서 수정 사항을 확인할 수 있습니다.

현재 프로덕션 웹 사이트에있는 해결 방법은 다음과 같습니다.
챌린지 편집기에서 Enter 키를 누른 다음 챌린지를 진행합니다.

불편을 끼쳐 드려 죄송합니다.

도움이 필요하면 채팅방으로 문의하세요.