텍스트를 변경하고 입력에서 커서 설정

Question

텍스트가 포함 된 입력이 있습니다. 이 입력을 클릭하면 텍스트의 색상이 변경됩니다. 입력에서 예. 텍스트 'Hello buddy'- 그리고 단어 Hello의 끝에있는 입력을 클릭하면 시작에 커서를 설정하는 쉬운 방법이 존재합니다 (단어 Hello 이전)? 나는에 텍스트를 입력하기 시작하면

$('#your_name').focus(function(){ 
    if($(this).val() == $(this).attr('title')){ 
     $(this).css('color', 'red'); 
    } 

    $(this).keyup(function() { 
     $(this).val(''); 
    }); 
}); 

그리고, 어떻게 현재 텍스트 Hello buddy을 제거하고 입력 만이 "새로운"텍스트 수 있을까요? keyup 메서드로 처리하려고하지만 입력 한 모든 내용이 삭제됩니다.

Answer 1

여기 내 DEMO을 참조하십시오. 당신은 단지 caret의 위치를 ​​설정하기 el.setSelectionRange(index, index);를 사용할 수 있습니다 또한 당신의 jsFiddle이 .. 편집here

를 참조 수정했습니다.

그리고 당신은, 당신은 한 번만 실행됩니다 .one 방법을 사용할 수 있습니다.의 keyup 경우 전체 텍스트를 제거하는 방법에 대한 두 번째 질문에 대한

,

$(this).one('keydown', function() { 
     $(this).val(''); 
}); 

Answer 2

당신은을 얻기 위해 입력 필드의 selectionStart 속성을 사용할 수 있습니다 캐럿의 위치를 ​​확인한 다음 필드의 value과 일치시켜 'Hello'단어 뒤에 있는지 확인할 수 있습니다. 그런 다음 setSelectionRange을 사용하여 캐럿을 위치로 설정할 수 있습니다. setSelectionRange(0,0);은 처음으로 설정합니다.

편집 : 난 그냥 질문을 다시 읽고 당신은 당신이 다시에 입력 할 때 모든 텍스트를 삭제하려면, 당신은 단지 필드의 모든 텍스트를 선택합니다 select()를 사용할 수 있습니다. 입력을 시작하면 선택한 텍스트가 삭제됩니다.