(선택)을 bahavior 일관성 부모 사용자 선택 입력 갖는다 : 없음 (크롬 계 브라우저)

godblessstrawberry :

지프에, 당신은 일관성과 입력 볼 수있는 select()모든 둘째 클릭 아무것도 선택하지 못하는 경우 행동 (모든 클릭에 선택한 내용)과 두 번째 입력

나는 전역 스타일은 역사적으로 프로젝트에 추가 한

* {
  user-select: none;
}

input {
  user-select: text;
}

내가 발견 - user-select: none부모에 설정하는 것은 속보입니다 select()아이의 입력을위한 방법.

[ MDN ] user-select: none : 요소와 하부 요소의 텍스트 선택이 아니다.

너무 많은 것들에 영향을 미칠 수 있기 때문에이 재정에 시도 그래서 나는 (우리는 지금이 아니라 다시 방문 할 계획이) 옛날 스타일을 제거 할 수없는 user-select행동하지만 설정 때와 운이 없다.parent {user-select: auto;} .parent .input {user-select: text;}

JS가 해결 나는 전에 제한 시간이 200ms를 설정 해요 select()그 작동하지만 추한 깜박임으로.

어떻게 제대로 그 CSS 소품을 무시합니까? (이 예에서 I는 입력으로 깨진 래핑 .buggy다른 정상적인 유지 될 수 있도록. 그러나 입력 상술 래퍼 수십 가지고 이것은 프로젝트 구조를 나타내지 않고 각각 갖는다 user-select: none)

그냥이의 재현을 발견 chromium-based브라우저 - 크롬 / EDGE / 오페라

.buggy * {
  user-select: none;
}

.buggy input {
  margin-top: 10px;
  user-select: text;
}

<input type='text' value='normal input' onclick='this.select()'/>
<div class='buggy'>
  <div>
    <input type='text' value='buggy input' onclick='this.select()'/>
  </div>
</div>

Kaiido :

즉, 어디에서 오는지 아직 조사하지 않은 이상한 버그.
이 버그 리포트를 보증,하지만 그것은 아마 높은 우선 순위로 간주되지 않습니다 의미, M50에서 repro 수 수 있습니다 있습니다.

당분간의 경우 취소하여이 문제를 해결할 수 있습니다 문서의 선택을 호출하기 전에 select방법 :

document.querySelectorAll('input').forEach( elem => {
  elem.onclick = (evt) => {
    getSelection().removeAllRanges(); // clear all selection
    elem.select();
  };
});

.buggy * {
  user-select: none;
}

.buggy input {
  margin-top: 10px;
  user-select: text;
}

<input type='text' value='normal input'/>
<div class='buggy'>
  <div>
    <input type='text' value='buggy input'/>
  </div>
</div>