게시판 내 태그 입력창 질문!
본문
에디터 밑에 태그 입력창을 복사 붙여넣었습니다;; php 를 할줄 모르거든요ㅜ
이게 pc에서 스페이스바를 누르면 자동으로 #이 붙으면서 다시 태그를 추가할수있거든요.
근데 모바일에서는 스페이스바 콤마를 아무리 눌러도 바뀌는것 없이
스페이스바를 누르면 띄워쓰기 콤마를 누르면 콤마가 그냥 붙네요ㅜ
어떻게 해야 모바일에서도 스페이스바를 누르면 자동으로 #이 붙을까요ㅜ
<?
include('script.php');
//태그를 저장할 여분 필드
?>
<input type="hidden" name="<?=$tagCol?>" id="<?=$tagCol?>">
<div class="tagList">
<div class="tagListTit"><i class="material-icons">label</i> 태그입력<u>(최대15글자/10개/<b>spacebar</b>를 이용해 작성)</u>
</diV>
<div class="tagListIpt">
<ul>
<?
if($write[$tagCol]){
$tags = explode(',',$write[$tagCol]);
for($i=0; $i<count($tags); $i++){
echo '<li class="tag">#<span>'.$tags[$i].'</span><i class="material-icons">clear</i></li>';
}
}
?>
<li class="tabTxt"><input type="text" id="tagIpt" placeholder="태그를 입력해주세요!" maxlength="15"></li>
</ul>
</div>
</div>
<script>
$(window).ready(function(){
$(document).on('click','.tag > i',function(){
$(this).parent().remove();
});
$(".ppTag").click(function(){
inputTag($(this).data('word'));
return false;
});
$("#tagIpt").on("keyup", function(event) {
$(".tagListIpt ul li span").removeClass('overlap');
if(event.keyCode == 32){
$(this).val($(this).val().replace(/ /gi, ""));
inputTag($(this).val());
}
});
});
function inputTagList(){
var linCnt = $(".tagListIpt ul li.tag").length;
var tag = '';
for(var i=0; i<linCnt; i++){
var j = i+1;
if(!tag){
tag = $(".tagListIpt ul li:nth-child("+j+") span").html();
}else{
tag += ','+$(".tagListIpt ul li:nth-child("+j+") span").html();
}
}
tag = tag.replace(" ", "");
console.log('after replace : '+tag);
$("#wr_1").val(tag);
}
function chkOverlap(a){
var linCnt = $(".tagListIpt ul li.tag").length;
var overlap = false;
for(var i=0; i<linCnt; i++){
var j = i+1;
if(a == $(".tagListIpt ul li:nth-child("+j+") span").html()){
$(".tagListIpt ul li:nth-child("+j+") span").addClass('overlap');
overlap = true;
}
}
return overlap;
}
function inputTag(a){
a = a.replace(/ /g, '');
var linCnt = $(".tagListIpt ul li.tag").length;
if(chkOverlap(a) == false){
if(linCnt < 10){
var taghtml_ = '';
taghtml_ += '<li class="tag">#<span>';
taghtml_ += a;
taghtml_ += '</span><i class="material-icons">clear</i></li>';
$(".tabTxt").before(taghtml_);
}else{
alert('태그틑 최대 10개까지 입력가능합니다.');
}
$("#tagIpt").val('');
}
}
</script>
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.zone_hashtags {
width: 50%;
list-style-type: none;
}
.zone_hashtags li {
margin: 0.2em;
}
.zone_hashtags textarea {
width: 100%;
height: 12em;
}
.zone_hashtags button {
border-radius: 0.2em;
background-color: orange;
border: 0;
padding: 0.4em 0.8em;
color: #fff;
float: right;
}
.zone_hashtags li::after {
display: block;
content: '';
clear: right;
}
.hashtag {
display: inline-block;
border-radius: 0.2em;
border: 1px solid #0969da;
background-color: #ddf4ff;
padding: 0.1em 0.2em;
margin: 0.2em 0;
}
.hashtag::before {
display: inherit;
content: '#';
}
#tags {
border: 1px solid gray;
color: gray;
padding: 0.5em;
min-height: 2.2em;
}
#tags .hashtag:nth-child(n + 11) {
border: 1px solid red;
background-color: #ffe8dd;
}
</style>
<script>
function extract_hashtags(id_from, id_to) {
var content_from = document.getElementById(id_from);
var hashtag_to = document.getElementById(id_to);
var hashtag = [];
content_from.value.replace(/[^\s]+(?:\s|$)/g, function () {
hashtag.push(arguments[0]);
});
var hashtag_edit = hashtag.map((v) => { return '<span class="hashtag">' + v + '</span>'; });
var hashtag_html = hashtag_edit.join(' ');
hashtag_to.innerHTML = hashtag_html;
}
</script>
</head>
<body>
<ul class="zone_hashtags">
<li>
<textarea id="tagIpt" placeholder="태그를 입력해주세요!" onkeyup="extract_hashtags('tagIpt', 'tags')"></textarea>
</li>
<li>
<button type="button" onclick="extract_hashtags('tagIpt', 'tags')">변환</button>
</li>
<li><div id="tags"></div></li>
</ul>
</body>
</html>
한가지만 물어볼께요~! 저위 코드에서 어느 부분이 스페이스바(띄어쓰기) 부분인가요?
아니면 스페이스 대신에 콤마(,) 넣을려면 어디다 넣어야 하나요?
답변을 작성하시기 전에 로그인 해주세요.