Safari의 이상한 문제 : 입력란에서 텍스트를 선택할 수 없습니다.

Question

사용자가 프로필 정보를 수정할 수있는 웹 응용 프로그램이 있습니다.

<form action="<snipped>" method="post" accept-charset="UTF-8" id="frmEditUser"> 

<fieldset> 

<p> 
<label for="username">Username</label> 
<input type="text" name="username" id="username" value="<?= $uname ?>" size="30" title="must be unique" size="30" /> 
<label for="username" generated="true" class="error">*<?= form_error('username'); ?></label> 
</p> 

</fieldset> 
</form> 

더 많은 분야가 있지만이 단순화 된 마크 업 내가 유달리 아무것도하지 오전 보여줍니다 이것은 입력 필드가 기존의 값을 포함하여 일반 웹 형태로 제공됩니다. Safari 및 Chrome (Windows 7)에서이 필드의 기존 값을 선택하려고하면 매우 이상한 동작이 나타납니다.

왼쪽에서 오른쪽으로 선택하면 선택한 텍스트가 예상대로 강조 표시됩니다. 필드 끝 부분에 커서를 놓고 오른쪽에서 왼쪽으로 선택하면 마우스 단추를 놓을 때 선택 사항이 실행 취소되고 커서가 필드 끝 부분에 다시 나타납니다.

이 문제는 내 응용 프로그램의 모든 입력 필드와 텍스트 영역에서 발생하지만 Safari 및 Chrome에서만 발생합니다. 나는 그것이 자바 스크립트 문제일지도 모른다고 생각했지만, 모든 자바 스크립트를 사용할 수 없게되면 문제는 지속될 것이다. 모든 CSS를 비활성화하면 문제가 해결됩니다.

제 CSS에 문제가 있습니다. 양식이나 양식 요소와 관련이있는 CSS 규칙을 모두 비활성화했지만 문제는 여전히 남아 있습니다.

다른 사람이 같은 문제에 직면했을 가능성이 있습니다.

업데이트 : 문제는 더욱 세밀합니다. 오른쪽에서 왼쪽으로 선택하고이 호버링 프로세스에서 왼쪽 가장자리의 필드를 종료하는 경우에만 발생하는 것으로 보입니다. 밖을 클릭 할 때와 같이 종료하지 말고 선택을 위해 마우스 버튼을 누른 상태에서 커서를 가리 키면 종료합니다.

업데이트 II : 문제의 근본 원인을 발견했습니다. 오른쪽에서 왼쪽으로 선택하면이 선택 과정에서 필드가 아닌 양식 요소가 종료됩니다. 양식 요소 주위에 빨간색 테두리를 추가했습니다. 왼쪽에서 나가자 마자 내가 선택한 것은 사라졌습니다. 왼쪽의 양식 요소에 패딩을 추가하면 양식 요소 안에있을 때만 선택 항목이 남아 있음을 알 수 있습니다.

아직 내가 좋아하는 것 기괴한 문제를 해결하기 위해 :(

Answer 1

을 나는 당신의 질문을 읽고 크롬에서 내 사이트를 확인하기로 결정하고 같은 문제를 발견했다. 내 사이트 www.futurekode.com에 내려 가서 문의 양식에 귀하의 이름과 이메일 주소를 입력하고 텍스트를 선택하려고합니다. 광산에

, 그것은 단지 두 번째 입력 필드 (이메일 하나)와 하나되지 텍스트 영역에 발생합니다.

나는 추가 발견 표시 : 입력란의 블록이 사파리가 아닌 크롬으로 수정됩니다./

매우 이상 함