div에 표시된 트리밍 된 입력 값

Question

알 수없는 ID를 가진 알 수없는 입력 상자가 있습니다. 입력 상자를 클릭하여 값을 다듬어서 div를 채우고 싶습니다. 내가 첫 번째 클릭에 표시되는 값을 갖고 싶어 JSFiddle

내 코드 입력 필드를 편집하면 예상대로 모든 작품

하지만 / 초점을 맞 춥니 다.

이것은 내가 작성한 JS 함수입니다.

JS

$('input').each(function() { 
     var $tthis = $(this), 
      defaultValue = $tthis.val(); 

defaultValue = defaultValue.substring(keyed.indexOf("|") + 1); 
defaultValue = defaultValue.substring(0, defaultValue.length - 2) 
     $("#target").html(defaultValue);  

}); 

HTML

<input 
id='thistext$index' 
type='text' 
onclick='this.select();' 
onfocus=" 
document.getElementById('show_hide').style.display='block'; 
document.getElementById('show_hide2').innerHTML = 'Copy this text into the wiki, it will display as: ';" 
onblur="document.getElementById('show_hide').style.display='none';" value='&#91&#91;http://www.example.com/$dirArray[$index]&#124;$dirArray[$index]&#93;&#93;' /> 

<div id='show_hide'> 
    <div id='show_hide2'> 
    </div> 
    <div id='target'> 
    </div> 
</div> 

Answer 1

는 내가 처음 바이올린에서 약간의 코드를 재구성. 나는 모든 인라인 자바 스크립트를 던져 버렸고 핸들러는 onFocus, onBlur, onClick이고 jQuery와 동일한 것으로 바뀌었고 나는 당신이 원하는 것을 얻었습니다.

jQuery의 on() 메서드를 사용하여 HTML을 많이 정리 한 것과 동일한 작업을 수행했습니다. 그런 다음 show() 내의 함수를 사용하여 몇 가지 다른 기능을 트리거했습니다. 이 절차가 더 쉬울 수도 있지만 멋지고 깨끗하다고 ​​생각했습니다.

마지막으로 트리밍과 하위 문자열을 추출하여 나중에 다시 사용할 수 있도록했습니다.

A fiddle here 아래 코드 :

$('input').on('click', function() { 
    var $input = $(this); 
    $('#show_hide').show(function(){ 
     $('#show_hide2').text('Copy this text into the wiki, it will display as:'); 
     var text = trimInputValue($input); 
     $('#target').text(text); 
    }); 
}); 

function trimInputValue($input) { 
    var text = $input.val(); 
    text = text.substring(text.indexOf("|") + 1); 
    text = text.substring(0, text.length - 2); 
    return text; 
} 

$('input').on('focusout', function() { 
    $('#show_hide').hide(); 
}); 

지금 당신이 궁금 할 것이다 당신의 select()가 떨어져 갔다. 걱정하지 마시고 on('click', function(){ select(); });에 포함 시키면 실행됩니다.