나는 (jquery를 사용하여) 양식의 키업에 스팬으로 감싸서 페이지에서 노란색으로 텍스트를 강조하는 간단한 html 양식을 만들려고 노력해 왔습니다.
키보드에서 백 스페이스하여 양식의 내용을 완전히 지운 다음 작동을 멈출 때까지 잘 작동합니다. 내 문제를 설명하기 위해 빠른 코드 펜을 만들었습니다.
http://codepen.io/liamtarpey/pen/KefCx
아마도 매우 간단한 수정일 수 있지만 무엇이 잘못되고 있는지에 대해 머리를 이해할 수 없습니다. 문제가 무엇인지 아는 사람이 있습니까?
내 페이지의 헤드에도 영향을 미치기 때문에 '*'대신 'body'또는 'html'선택기를 사용하고 싶지만 둘 중 하나와 함께 작동하지 않습니다.
HTML :
<form>
<input type="text" id="searchfor"/>
</form>
<!-- The below is just a test to check the value of the input is being returned -->
<span>Value of form: </span><span id="test"></span>
<div>
<h3>example text here</h3>
</div>
jQuery :
$("#searchfor").on("keyup change", function() {
// store value in a variable
value = this.value;
// unwrap span from previous search
$("span[id^='highlightspan']").contents().unwrap();
// wrap span around inputted text
$("*").each(function() {
if($(this).children().length==0) {
$(this).html($(this).html().replace(value, '<span id="highlightspan" style="background:yellow;">' + value + '</span>'));
}
});
$("#test").html(value);
});
highlightspan래핑을 푼 후 요소를 제거 합니다.
$("span[id^='highlightspan']").contents().unwrap();
$("span[id^='highlightspan']").remove();
이렇게하면 DOM에서 ID가 중복되는 것을 방지 할 수 있지만 highlightspan클래스를 만드는 것이 가장 좋습니다 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다