2016-08-10 3 views
0

:텍스트 삽입 - 새 라인 탭 공백을 삽입 내가 얼마 전에 만든 일부 코드는 다음과 같이 한

selected = ''; 
 

 
$('img').click(function(){ 
 
    console.log($(this).attr('alt')); 
 
\t selected = $(this).attr('alt'); 
 
}); 
 

 
$('#comments').click(function(){ 
 
\t insertAtCaret('comments',selected) 
 
    // Clear the selection so it isn't copied repeatedly 
 
    selected = ''; 
 
}); 
 

 
function insertAtCaret(areaId,text) { 
 
    var txtarea = document.getElementById(areaId); 
 
    var scrollPos = txtarea.scrollTop; 
 
    var strPos = 0; 
 
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
 
     "ff" : (document.selection ? "ie" : false)); 
 
    if (br == "ie") { 
 
     txtarea.focus(); 
 
     var range = document.selection.createRange(); 
 
     range.moveStart ('character', -txtarea.value.length); 
 
     strPos = range.text.length; 
 
    } 
 
    else if (br == "ff") strPos = txtarea.selectionStart; 
 

 
    var front = (txtarea.value).substring(0,strPos); 
 
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
 
    txtarea.value=front+text+back; 
 
    strPos = strPos + text.length; 
 
    if (br == "ie") { 
 
     txtarea.focus(); 
 
     var range = document.selection.createRange(); 
 
     range.moveStart ('character', -txtarea.value.length); 
 
     range.moveStart ('character', strPos); 
 
     range.moveEnd ('character', 0); 
 
     range.select(); 
 
    } 
 
    else if (br == "ff") { 
 
     txtarea.selectionStart = strPos; 
 
     txtarea.selectionEnd = strPos; 
 
     txtarea.focus(); 
 
    } 
 
    txtarea.scrollTop = scrollPos; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#!"><img src="smiley1.png" alt="{smiley001}"><img src="smiley2.png" alt="{smiley002}"><img src="smiley3.png" alt="{smiley003}"><img src="smiley4.png" alt="{smiley004}"><img src="smiley5.png" alt="{smiley005}"></a><br> 
 
<textarea id="comments" cols="50" rows="10"></textarea>

이 코드에서, 당신은 그림을 클릭하고 텍스트 영역의 공백을 클릭하면 그림의 alt 속성이 캐럿의 위치에 붙여 넣어집니다.

일부 사진에는 탭 공백과 새 줄을 삽입하고 싶기 때문에 해당 이미지의 alt 속성에 어떤 값을 넣을까요?

답변

0

올바르게 이해하면 공백 기반 텍스트 형식을 alt 속성에 추가하려고합니다. 나는 이것이 가능하다고 생각하지 않는다. 그것은 브라우저에 의해 공간으로 변환 될 것이다. 이를 처리하기 위해 data- attribute을 추가 할 수 있습니다.

+0

공백을위한 데이터 속성은 무엇입니까? –

+0

예를 들어 urlencoded 원본 텍스트 (탭 또는 새 줄 포함), 삽입 할 때 urldecode 할 수있는 항목 이렇게하면 UI/UX 나 Html의 유효성을 손상시키지 않습니다. – balint

+0

정말 고맙습니다. :) –