재미있는 Jquery 텍스트 입력

클릭하면 테이블 셀을 수정할 다음 jQuery가 있습니다. 사용자가 텍스트 입력을 완료하고 입력 할 때 보통 <td>으로 돌아갑니다.재미있는 Jquery 텍스트 입력

, HTML

<td class="delivered"> 
    {{ title.delivery_date|date:"Y-m-d" }} 
</td>

JS -

$("td.delivered").click(function() { 
    if ($(this).find('#inp').length == 0) { 
     var before = $(this).text(); 
     var title_id = $(this).parent().attr('id'); 
     var status_type = 'delivery-date' 
     $(this).html($("<input/>", { 
      id: 'inp', 
      style: 'width:70px;', 
      placeholder: 'YYYY-MM-DD', 
      change: function() { 
       selectdone(this, title_id, status_type); 
      } 
     })); 
     $("#inp").focus(); 
     $('#inp').val(before); 
    } 
});

위의 JS 작동하지만, 그것에 대해 특질이있다.

입력 요소가 70px이지만 텍스트 너비가 200px 인 것처럼 스크롤하는 것으로 보입니다. 이렇게하면 td를 처음 클릭 한 후에 placeholder을 볼 수 없게됩니다. 어떻게하면 커서가 항상 플러시되고 텍스트 입력은 모든 방법으로 70px가되도록 만들 것입니다.

업데이트 : 다음은 텍스트를 입력하고 POST : u'status': [u'\t\t\t\t\t\t\t\t\t\t\t2012-01-01']을 통해 입력 한 내용입니다. 즉, 텍스트 입력에서 11 개의 탭으로 시작하는 것 같습니다! 왜 이런 일이 생기고 어떻게 없앨까요?

출처

2012-06-29 David542

'선택 완료'란 무엇입니까? –

호출하는 또 다른 함수이지만 위의 js에 영향을 주어서는 안됩니다. – David542

그리고 여러 페이지가 같은 페이지에 있습니까? 여러개의 요소를'inp '의 id로 지정하는 것은 중요한 문제입니다. –

div의 입력란을 width:70px;overflow:hidden으로 감쌀 수 있으므로 스크롤바가 보이지 않을 것입니다.

출처

2012-06-29 19:56:24

please 업데이트 된 게시물보기 – David542

'$ (this) .text()'의 데이터는'var before = $ (this) .text(). replace (/ \ t/g, '');'와 같은 것으로 청소해야합니다. 입력 태그 값에 사용되지 않은 공백이 없으면 html 파일을보십시오. –

그게 문제였습니다 - 도와 줘서 고마워! – David542

재미있는 Jquery 텍스트 입력

답변

관련 문제