2010-06-21 3 views
17

jQuery를 사용하여 입력 상자 내에서 텍스트의 일부분 만 강조하는 방법을 알아 내려고합니다. 입력 상자의 전체 내용을 강조하는 것은 매우 간단하지만 한 단어 또는 두 글자 만 강조하는 방법은 무엇입니까?jQuery를 사용하여 입력 상자 내에서 문자열 부분 선택

감사합니다.

+0

, 당신은 뜻을 표시? 파란색, 흰색 텍스트? – Kobi

+1

_select_의 의미는 무엇입니까? 커서로 선택할 때 일어나는 것과 같은 강조 표시를 의미합니까? – Kekoa

+0

나는 그 말을 고쳤다. 나는 select라는 단어를 사용했는데, 실제로 의미하는 것은 하이라이트였습니다. 실수로 사과드립니다. – Lukasz

답변

30

텍스트의 경우 <input> 요소의 경우 다음이 수행됩니다. 이 예는 입력에 바로 단어 "이"를 선택 : 선택으로

"선택"으로

function setInputSelection(input, startPos, endPos) { 
 
    input.focus(); 
 
    if (typeof input.selectionStart != "undefined") { 
 
     input.selectionStart = startPos; 
 
     input.selectionEnd = endPos; 
 
    } else if (document.selection && document.selection.createRange) { 
 
     // IE branch 
 
     input.select(); 
 
     var range = document.selection.createRange(); 
 
     range.collapse(true); 
 
     range.moveEnd("character", endPos); 
 
     range.moveStart("character", startPos); 
 
     range.select(); 
 
    } 
 
} 
 

 
document.getElementById("setSelection").onmousedown = function() { 
 
    var input = document.getElementById("i"); 
 
    setInputSelection(input, 4, 7); 
 
    return false; 
 
};
<input id="i" type="text" value="One two three"> 
 
<input type="button" value="Set selection" id="setSelection">

+0

이것은 정확히 내가 필요한 것입니다! 감사! – Lukasz

+1

솔직히 말해서, 나는 이것이 교육적 논평이 아니라는 것을 안다. 그러나 정말로 IE에 와라! 코드 대 7 라인 대 2. 자신의 방식이 믹스에 더 많은 기능을 추가 할 수 있지만 불필요합니다. 이 예제를 제공 해줘서 고마워요! –

+0

@JasonFoglia : 빈 줄이있을 수있는 텍스트 영역의 오래된 IE에서이 작업을 안정적으로 수행하기위한 코드는 [훨씬 더 여전히] (http://stackoverflow.com/a/3373056/96100)입니다. 공평하게, IE 9는'selectionStart'와'selectionEnd'를 지원함으로써 이것을 수정합니다. –

-1

전체 값을 선택한 다음 코드에서 문자열을 조작해야합니다. 단어를 사용하여 수행하려는 작업에 따라 정규 표현식을 사용하여 특정 단어/문자를 찾습니다.

+0

코드가 입력 텍스트 상자 내부의 텍스트 부분을 어떻게 강조 표시합니까? –

관련 문제