Q&A – 간세네

편집 가능한 엘리먼트에 자동 완성으로 링크 추가하기

2015-01-242015-01-24 간세

Q. 자동완성기능 textarea에 <a>태그적용

AJAX를 이용해 자동완성검색기능을 구현하였습니다 그러나 제가원하는 대로 되지않아 이렇게 질문을 올립니다.
페이스북 태그처럼 구현하고있는데 자동완성검색어를 클릭시 textarea태그에 <a>태그가 걸어져서 나오는
즉, 안녕하세요 admin 처럼 나오게하고싶습니다
textarea 태그에 아무리 찾아보아도 안에 태그를 적용할수없다는 지식만나옵니다 정말 textarea 태그안에 <a> 태그를 적용할순없나요
꼭 완성하고싶은데..다른방법이있다면 어떤말법이있을까요 div태그 도 사용해보았지만 글자를 입력할수있는 창이 나오지않아 div 태그도 못쓰고..

A.DIV 태그에 contenteditable 속성을 사용 하세요.

학인하신 것처럼 textarea 에 태그를 입력해봐도 <a>링크</a> 태그가 그대로 보이며, 당연히 이 링크가 동작 하지도 않습니다.

답변을 먼저 드리면, DIV 같은 일반 태그에 contenteditable 속성을 설정 하면 가능합니다.

contenteditable 속성

HTML5 오픈 레퍼런스의 설명을 참고 하세요.

태그에 contenteditable=”true” 라고 속성을 설정 하면 해당 엘리먼트의 내용을 편집할 수 있게 됩니다.

<div class="input" contenteditable="true" id="input">여기를 수정 해보세요 ...</div>

1	<div class="input" contenteditable="true" id="input">여기를 수정 해보세요 ...</div>

여기를 수정 해보세요 …

contenteditable 엘리먼트에 HTML 추가

그리고, textarea 에서는 불가능하지만 contenteditable=”true” 로된 엘리먼트에서는 HTML 태그도 사용 가능하며 추가된 HTML 엘리먼트의 내용도 수정 가능 합니다.

<div contenteditable="true">여기에 <a href="#">링크</a> 추가</div>

1	<div contenteditable="true">여기에 <a href="#">링크</a> 추가</div>

여기에 링 to the 크 추가

div 에 자동 완성 기능 추가

질문을 보면 jquery-ui 를 이용해 자동 완성을 구현한 것 같은데, div 에도 자동완성 기능을 붙일 수 있습니다.

시도해 봤는데 안된다면 jquery-ui가 지원하지 않는 거니까 다른 라이브러리를 찾아보셔도 될 것 같습니다.

실제로 페이스북의 답글 다는 영역을 확인해보면 아래 처럼 div에 contenteditable=”true” 를 사용하고 있습니다.

그리고, 이 답변을 준비 하면서 실제로 가능한지 직접 div에 자동 완성 기능을 붙여 봤습니다. 데모 보기

추가된 링크 클릭 가능하게 하기

위에서 contenteditable=”true” 엘리먼트에 링크를 추가했는데요, 클릭 해보면 링크 문구를 수정 할 수 있게 커서가 위치하지만, 링크가 동작하지는 않습니다. 만약, 추가된 링크를 동작 하게 하려면 아래 처럼 <a> 태그에는 contenteditable=”false” 를 설정 합니다.

<div contenteditable="true" >동작하는 <a href="#" contenteditable="false">링크</a> 추가</div>

1	<div contenteditable="true" >동작하는 <a href="#" contenteditable="false">링크</a> 추가</div>

동작하는 링크 추가

추가된 링크는 클릭 할 수는 있지만 수정 할 수는 없습니다. 이게 질문 의도에 가장 부합하는 방식일 것 같네요.

건투를 빕니다.

참고

데모를 만들어 봤습니다.

자동 완성 기능을 직접 만들어 보느라 소스가 길어졌습니다.

데모 보기

시연 영상 입니다.

자바스크립트 슬라이딩 퍼즐

2015-01-132015-02-03 간세

Q. 자바스크립트 랜덤게임 질문이요!

1. Math.random()함수를 이용한 램던 숫자 풀 구현

2. 3×3 배열 생성하기 하고 웹페이지에 테이블 생성하기

3. 3×3 배열에 랜덤 숫자 넣어 퍼즐 테이블 완성하기

4. 키 이벤트를 활용하여 퍼즐 조작 구현하기

이 4가지 조건을 충족하는 자바코드를 만들려고 하는데요 현재 요 아래까지밖에 못했어요ㅠㅠ어떻게 해야할까요?

A. 자바스크립트로 슬라이더 퍼즐 만들기.

아래 답변은 몇 가지를 전제 합니다.

1. 위 질문에서 말하는 퍼즐을 “슬라이딩 퍼즐” 로 간주 합니다.

2. 대충의 자바스크립트 문법을 알고 있다고 가정 합니다.

3. 아래에서 소개하는 스크립트에는 jQuery를 사용했습니다.

슬라이더 퍼즐은 어릴 때 한 번쯤 해봤을만한 그… 숫자 조각을 이리 저리 밀어서 순서대로 맞추는 퍼즐입니다. 아래 사진을 보면 “아~” 할겁니다.

sliding puzzle (by eko https://www.flickr.com/photos/ekosystem/1653442249)

1. 이런 보드 게임류를 만들때는 2차원 배열을 이용합니다.

2. 2차원 배열은 그 값들에 array[y][x] 와 같이 접근할 수도 있고, array[y * X-length + x] 와 같이 1차원 적으로도 접근할 수 있습니다.

2. 데이터와 화면표시를 분리합니다. 데이터만 조작 하는 함수를 만들고 데이터가 변경 될때마다 화면이 업데이트 되도록 합니다.

1. 화면

이런 모양이 되도록 할 예정입니다. 아래 테이블에는 내용이 빠져 있는데 나중에 스크립트로 채워 넣습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Sliding Puzzle</title>
	<style type="text/css">
		#board {border: 1px solid #ccc;}
		#board td {border:1px solid #000; width:25px; height:25px; padding:5px; text-align: center; }
		#board td.num {background-color: yellow; }
	</style>
</head>
<body>
	<table id="board">
	</table>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Sliding Puzzle</title>

#board {border: 1px solid #ccc;}

#board td {border:1px solid #000; width:25px; height:25px; padding:5px; text-align: center; }

#board td.num {background-color: yellow; }

</style>

</head>

<body>

</table>

</body>

</html>

2. 데이터

var YLEN = 3, // 행 길이
        XLEN = 3, // 열 길이
        blank = YLEN * XLEN - 1, // 빈칸 위치 (최초에는 맨 마지막 칸을 빈칸으로)
        BLANK = 0, // 빈칸의 값
        board = [], // 보드 배열 (YLEN x XLEN)
        boardEl = $('#board'); // 테이블 엘리먼트

var YLEN = 3, // 행 길이

XLEN = 3, // 열 길이

blank = YLEN * XLEN - 1, // 빈칸 위치 (최초에는 맨 마지막 칸을 빈칸으로)

BLANK = 0, // 빈칸의 값

board = [], // 보드 배열 (YLEN x XLEN)

boardEl = $('#board'); // 테이블 엘리먼트

3. 초기화

board 배열을 초기화 합니다. 초기화에는 2가지 방법이 있습니다.

1. 전체 배열에 무작위로 1 ~ 8 숫자를 집어 넣는다.
쉽게 구현 할 수 있고 빠르지만, 게임이 불가능한 형태로 초기화 될 수 있습니다.

2. 1 ~ 8의 숫자를 순서대로 집어 넣고 게임 규칙에 따라 무작위로 섞는다.
조금 복잡해지며 게임의 규칙을 먼저 만들고 나서 해야 하지만 게임이 불가능해지는 경우는 없습니다.

여기서는 2번째 방법을 사용하도록 하겠습니다.

function initPuzzle() { // 퍼즐 데이터를 초기화
    board = [];
    for (var y = 0; y < YLEN; y++) {
        board[y] = []; // 각 행마다 열 배열 설정
        for (var x = 0; x < XLEN; x++) {
            var idx = y * XLEN + x;
            if (idx < blank) board[y][x] = idx + 1; // 순서대로 숫자 할당
            else board[y][x] = BLANK; // 마지막 빈칸 설정
        }
    }

    // 데이터 초기화 후 화면 갱신
    updateBoard();
}

function updateBoard() { // 퍼즐 데이터를 화면에 표시
    boardEl.empty(); // 테이블을 비우고
    var html = '';
    for (var y = 0; y < YLEN; y++) {
        html += '<tr>';
        for (var x = 0; x < XLEN; x++) {
            if (board[y][x] != BLANK) html += '<td class="num">' + board[y][x] + '</td>';
            else html += '<td class="blank">&nbsp;</td>'; // 빈칸
        }
        html += '</tr>';
    }
    boardEl.html(html);
}

initPuzzle(); // 보드 데이터 초기화

function initPuzzle() { // 퍼즐 데이터를 초기화

board = [];

for (var y = 0; y < YLEN; y++) {

board[y] = []; // 각 행마다 열 배열 설정

for (var x = 0; x < XLEN; x++) {

var idx = y * XLEN + x;

if (idx < blank) board[y][x] = idx + 1; // 순서대로 숫자 할당

else board[y][x] = BLANK; // 마지막 빈칸 설정

}

// 데이터 초기화 후 화면 갱신

updateBoard();

}

function updateBoard() { // 퍼즐 데이터를 화면에 표시

boardEl.empty(); // 테이블을 비우고

var html = '';

for (var y = 0; y < YLEN; y++) {

html += '<tr>';

for (var x = 0; x < XLEN; x++) {

if (board[y][x] != BLANK) html += '<td class="num">' + board[y][x] + '</td>';

else html += '<td class="blank"> </td>'; // 빈칸

}

html += '</tr>';

}

boardEl.html(html);

}

initPuzzle(); // 보드 데이터 초기화

일단, 이렇게 실행 하면 위의 퍼즐 그림 처럼 숫자가 순서대로 표시되고 맨 마지막 칸이 빈칸으로 설정 됩니다. 이제, 이동하는 함수를 만들고 초기화 해서 무작위로 이동을 수행 하도록 합니다.

function moveTo(to) { // 빈칸을 to 위치로 이동
    // 빈칸에 to 위치의 숫자 옮기고
    board[parseInt(blank / YLEN,10)][blank % XLEN] = board[parseInt(to / YLEN,10)][to % XLEN];
    // to 위치에 빈칸 값 설정
    board[parseInt(to / YLEN,10)][to % XLEN] = BLANK;
    // to 위치를 빈칸으로 설정
    blank = to;
    // 화면 갱신
    updateBoard();
}

function move(d, human) { // 이동 (가능한 경우)
    // d : 이동 방향 
    // human : 사람이 이동 했는지 여부 (초기화를 위해)
    switch (d) {
        case 'r': // right : 빈칸이 맨 좌측이 아니면 빈칸을 좌측으로 이동
            if (blank % XLEN > 0) moveTo(blank - 1);
            break;
        case 'l': // left : 빈칸이 맨 우측이 아니면 빈칸을 우측으로 이동
            if (blank % XLEN < XLEN - 1) moveTo(blank + 1);
            break;
        case 'd': // down : 빈칸이 멘 위가 아니면 빈칸을 위로 이동
            if (parseInt(blank / YLEN,10) > 0) moveTo(blank - XLEN);
            break;
        case 'u': // up : 빈칸이 맨 아래가 아니면 빈칸을 아래로 이동
            if (parseInt(blank / YLEN,10) < YLEN - 1) moveTo(blank + XLEN);
            break;
    }
}

function moveTo(to) { // 빈칸을 to 위치로 이동

// 빈칸에 to 위치의 숫자 옮기고

board[parseInt(blank / YLEN,10)][blank % XLEN] = board[parseInt(to / YLEN,10)][to % XLEN];

// to 위치에 빈칸 값 설정

board[parseInt(to / YLEN,10)][to % XLEN] = BLANK;

// to 위치를 빈칸으로 설정

blank = to;

// 화면 갱신

updateBoard();

}

function move(d, human) { // 이동 (가능한 경우)

// d : 이동 방향

// human : 사람이 이동 했는지 여부 (초기화를 위해)

switch (d) {

case 'r': // right : 빈칸이 맨 좌측이 아니면 빈칸을 좌측으로 이동

if (blank % XLEN > 0) moveTo(blank - 1);

break;

case 'l': // left : 빈칸이 맨 우측이 아니면 빈칸을 우측으로 이동

if (blank % XLEN < XLEN - 1) moveTo(blank + 1);

break;

case 'd': // down : 빈칸이 멘 위가 아니면 빈칸을 위로 이동

if (parseInt(blank / YLEN,10) > 0) moveTo(blank - XLEN);

break;

case 'u': // up : 빈칸이 맨 아래가 아니면 빈칸을 아래로 이동

if (parseInt(blank / YLEN,10) < YLEN - 1) moveTo(blank + XLEN);

break;

}

move(d, human) 은 이동 방향과 사람이 이동 시켰느지 여부를 받습니다. 초기화 시에는 human 을 false 로 사람이 직접 움직일 떄는 true 로 해서 나중에 사람이 움직일 때는 별도의 액션을 취하도록 할 수 있을 겁니다. 소리를 재생 한다든지, 게임이 끝났는지 체크 한다든지 …

이동 하는 함수가 만들어 졌으니 초기화 함수를 다시 작성 합니다. 아주 여러번 무작위로 좌/우/위/아래 중에 하나를 골라 이동 시키는 겁니다.

function initPuzzle() { // 퍼즐 데이터를 초기화
    board = [];
    for (var y = 0; y < YLEN; y++) {
        board[y] = []; // 각 행마다 열 배열 설정
        for (var x = 0; x < XLEN; x++) {
            var idx = y * XLEN + x;
            if (idx < blank) board[y][x] = idx + 1; // 순서대로 숫자 할당
            else board[y][x] = BLANK; // 마지막 빈칸 설정
        }
    }
    // 이동 방향
    var moves = ['r', 'l', 'd', 'u'];
    for (var z = 0; z < 500; z++) { // 500회 동안 무작위로 이동
        move(moves[parseInt(Math.random() * 4,10)], false);
    }
    // 데이터 초기화 후 화면 갱신
    updateBoard();
}

function initPuzzle() { // 퍼즐 데이터를 초기화

board = [];

for (var y = 0; y < YLEN; y++) {

board[y] = []; // 각 행마다 열 배열 설정

for (var x = 0; x < XLEN; x++) {

var idx = y * XLEN + x;

if (idx < blank) board[y][x] = idx + 1; // 순서대로 숫자 할당

else board[y][x] = BLANK; // 마지막 빈칸 설정

}

// 이동 방향

var moves = ['r', 'l', 'd', 'u'];

for (var z = 0; z < 500; z++) { // 500회 동안 무작위로 이동

move(moves[parseInt(Math.random() * 4,10)], false);

}

// 데이터 초기화 후 화면 갱신

updateBoard();

}

실행 하면 아래와 같이 무작위로 이동 된 모습을 볼 수 있습니다.

4. 키보드 입력 받기

키보드 입력은 간단합니다. 눌린 키를 검사해 이동 함수를 호출 합니다.

$(document).keydown(function (e) {
    // 눌린 키에 따라 이동
    switch (e.which) {
        case 37:
            move('l', true);
            break;
        case 38:
            move('u', true);
            break;
        case 39:
            move('r', true);
            break;
        case 40:
            move('d', true);
            break;
    }
});

$(document).keydown(function (e) {

// 눌린 키에 따라 이동

switch (e.which) {

case 37:

move('l', true);

break;

case 38:

move('u', true);

break;

case 39:

move('r', true);

break;

case 40:

move('d', true);

break;

}

});

5. 게임 완료

사용자의 키보드 입력을 받고 이동이 일어 난 후에 모든 숫자가 순서대로 배치 되었는지 검사해 게임 완료 여부를 결정 합니다. 이동 함수에서 사람이 움직였다면 이 검사를 수행 하는 코드도 추가 합니다.

function isEnd() {
    for (var y = 0; y < YLEN; y++) {
        for (var x = 0; x < XLEN; x++) {
            var expect = y * XLEN + x + 1;  // 기대값
            if (y * XLEN + x < YLEN * XLEN - 1) { // 마지막 칸은 제외
                if (board[y][x] != expect) return; // 기대값이 아니면 중단
            }
        }
    }
    // 여기 까지 코드가 진행 됐다면. 성공.
    alert('ok');
}

function move(d, human) { // 이동 (가능한 경우)
    // 기존 코드 생략 ...
    // 사람이 움직였다면 완료 여부 체크
    if (human) isEnd();
}

function isEnd() {

for (var y = 0; y < YLEN; y++) {

for (var x = 0; x < XLEN; x++) {

var expect = y * XLEN + x + 1; // 기대값

if (y * XLEN + x < YLEN * XLEN - 1) { // 마지막 칸은 제외

if (board[y][x] != expect) return; // 기대값이 아니면 중단

}

// 여기 까지 코드가 진행 됐다면. 성공.

alert('ok');

}

function move(d, human) { // 이동 (가능한 경우)

// 기존 코드 생략 ...

// 사람이 움직였다면 완료 여부 체크

if (human) isEnd();

}

다 됐습니다.

구동 화면 입니다.

참고

전체 소스를 데모 페이지 에서 참고 하세요.
JSFiddle 에서 직접 소스를 수정 해보세요.

자바스크립트에서 키보드 연속입력 부드럽게

2015-01-042015-01-05 간세

Q. 자바스크립트에서 키보드 연속입력 부드럽게

1.자바스크립트안에서 한 캐릭터를 키보드를 꾹 눌러 움직이게 했을때
부드럽게 움직이지않고 딱 딱딱 딱딱딱딱딱딱딱 흐름으로 움직이는데요
키보드를 꾹눌러서 이동을해도 부드럽게 움직이는방법이 궁금합니다.

2. 캐릭터를 2마리 생성시켜 한 키보드에서 같이 움직인다했을때.
두 캐릭터가 동시에 움직이면 한 캐릭터만 움직이게됩니다 (키보드입력이 씹혀서)
키보드 동시 키 입력할수있는 방법도 궁금합니다.

A1. 키보드로 캐릭터 이동 부드럽게 하기 아래 코드들은 jQuery를 기반으로 합니다.

보통은 아래와 같은 코드로 캐릭터를 움직이도록 합니다.

<div class="stage"><span id="p1"></span></div>
<script>
$(function(){
	var p1x = 0, p1y = 0, speed = 5, lookup, $p1 = $('#p1');
	$(document).keydown(function(e){

		switch(e.which) {
			case 38: // up
				p1y -= speed;
				break;
			case 40: // down
				p1y += speed;
				break;
			case 37: // left
				p1x -= speed;
				break;
			case 39: // right
				p1x += speed;
				break;
		}

		$p1.css({top: p1y, left: p1x});
	});
});
</script>

$(function(){

var p1x = 0, p1y = 0, speed = 5, lookup, $p1 = $('#p1');

$(document).keydown(function(e){

switch(e.which) {

case 38: // up

p1y -= speed;

break;

case 40: // down

p1y += speed;

break;

case 37: // left

p1x -= speed;

break;

case 39: // right

p1x += speed;

break;

}

$p1.css({top: p1y, left: p1x});

});

</script>

키 이벤트를 잡아서 각 키가 눌렸을때 캐릭터를 이동 시키는건데요. 키를 누르고 있는 경우 키반복은 사용자 컴퓨터에 따라 다르게 반응할겁니다. 키보드 설정에 따라 달라질 수 있겠죠. 어찌 되었든 원하는대로 스무드~ 하게 움직여주지는 않습니다.

원하는대로 캐릭터가 부드럽게 움직이게 하는 문제는 타이머를 사용해 해결할 수 있는데요 아이디어는 간단합니다.

1. 키를 누르면 해당 키가 눌렸다는 정보를 저장 합니다.
2. 키를 놓으면 해당 키가 눌렸다는 정보를 해제 합니다.
3. 타이머를 이용해 주기적으로 (아주 짧게 아래 예에서는 0.01초) 어떤 키가 눌려 있는지 검사해서 눌려 있는 키에 대한 행동을 지정 합니다.

코드는 아래와 같습니다.

<div class="stage"><span id="p2" class="glyphicon glyphicon-asterisk player"></span></div>
<script>
$(function(){
	var keypress = {}, // 어떤 키가 눌려 있는지 저장
	p2x = 0, p2y = 0, speed = 5, $p2 = $('#p2');
	setInterval(function(){ // 주기적으로 검사
		if(keypress['87']) p2y -= speed; // up - w
		if(keypress['83']) p2y += speed; // down - s
		if(keypress['65']) p2x -= speed; // left - a
		if(keypress['68']) p2x += speed; // right - d

		$p2.css({top: p2y, left: p2x});
	}, 10); // 매 0.01 초마다 실행

	$(document).keydown(function(e){ // 어떤 키가 눌렸는지 저장 
		keypress[e.which.toString()] = true;
	});
	$(document).keyup(function(e){ // 눌렸던 키를 해제
		keypress[e.which.toString()] = false;
	});
});
</script>

$(function(){

var keypress = {}, // 어떤 키가 눌려 있는지 저장

p2x = 0, p2y = 0, speed = 5, $p2 = $('#p2');

setInterval(function(){ // 주기적으로 검사

if(keypress['87']) p2y -= speed; // up - w

if(keypress['83']) p2y += speed; // down - s

if(keypress['65']) p2x -= speed; // left - a

if(keypress['68']) p2x += speed; // right - d

$p2.css({top: p2y, left: p2x});

}, 10); // 매 0.01 초마다 실행

$(document).keydown(function(e){ // 어떤 키가 눌렸는지 저장

keypress[e.which.toString()] = true;

});

$(document).keyup(function(e){ // 눌렸던 키를 해제

keypress[e.which.toString()] = false;

});

</script>

데모를 확인해 보세요. 데모 보기 어때요 ? 원하는대로 움직이나요 ?

A2. 캐릭터 2마리(?)를 동시에 움직이기

위의 방법을 사용하면 2마리도 동시에 움직일 수 있습니다.

추가로, 대각선으로도 움직일 수 있습니다.

이상, 건투를 빕니다.

카테고리: Q&A

편집 가능한 엘리먼트에 자동 완성으로 링크 추가하기

Q. 자동완성기능 textarea에 <a>태그적용

A.DIV 태그에 contenteditable 속성을 사용 하세요.

contenteditable 속성

contenteditable 엘리먼트에 HTML 추가

div 에 자동 완성 기능 추가

추가된 링크 클릭 가능하게 하기

참고

자바스크립트 슬라이딩 퍼즐

Q. 자바스크립트 랜덤게임 질문이요!

A. 자바스크립트로 슬라이더 퍼즐 만들기.

슬라이딩 퍼즐 (sliding puzzle) ?

아이디어

구현

1. 화면

2. 데이터

3. 초기화

4. 키보드 입력 받기

5. 게임 완료

참고

자바스크립트에서 키보드 연속입력 부드럽게