JS 내용 을 더 블 클릭 하여 편집 가능 한 상태 로 변경

일부 사이트 에서 우 리 는 상호작용 이 매우 강 한 기능 을 자주 본다.일부 사용자 자 료 는 텍스트 상자 가 나타 나 는 것 을 직접 두 번 클릭 하고 여기에 새로운 자 료 를 입력 하면 수정 할 수 있 으 며 확인 단 추 를 누 르 지 않 아 도 된다.
저 는 인터넷 에서 많은 자 료 를 찾 았 지만 작은 bug 가 있 습 니 다.초점 을 얻 은 후에 커서 의 위 치 는 텍스트 상자 의 내용 이 시작 되 는 곳 입 니 다.이렇게 편집 할 때 사용자 가 커서 위 치 를 다시 선택해 야 합 니 다.이런 상호작용 은 좋 지 않 습 니 다.나중에 새로운 자 료 를 찾 아 이 문 제 를 해 결 했 으 니 더 많은 사람들 에 게 도움 이 되 었 으 면 좋 겠 습 니 다.
코드 부분:
메모:텍스트 의 내용 을 선택 하거나 커서 위 치 를 설정 합 니 다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS           </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
  function ShowElement(element) {
    var oldhtml = element.innerHTML;
    //    input  
    var newobj = document.createElement('input');
    //         
    newobj.type = 'text';
    //       value 
    newobj.value = oldhtml;
    //             
    newobj.onblur = function() {
      element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
      //               ,      ,       
    }
    //           
    element.innerHTML = '';
    //         ,input  
    element.appendChild(newobj);
    //                (    :start,end;start     ,end     ;                    )
    newobj.setSelectionRange(0, oldhtml.length);
    //      
    newobj.focus();
  }
</script>
</head>
<body>
  <dl>
    <dt>     :</dt>
    <dd ondblclick="ShowElement(this)">   </dd>
    <dt>     </dt>
    <dd ondblclick="ShowElement(this)">   ,     !</dd>
  </dl>
</body>
</html>
이벤트 더 블 클릭:ondblclick
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 JS 가 더 블 클릭 으로 내용 을 편집 가능 한 상태 로 바 꾸 었 습 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 댓 글로 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기