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 속성에 어떤 값을 넣을까요?
공백을위한 데이터 속성은 무엇입니까? –
예를 들어 urlencoded 원본 텍스트 (탭 또는 새 줄 포함), 삽입 할 때 urldecode 할 수있는 항목 이렇게하면 UI/UX 나 Html의 유효성을 손상시키지 않습니다. – balint
정말 고맙습니다. :) –