게시판 내 태그 입력창 질문! 채택완료
에디터 밑에 태그 입력창을 복사 붙여넣었습니다;; php 를 할줄 모르거든요ㅜ
이게 pc에서 스페이스바를 누르면 자동으로 #이 붙으면서 다시 태그를 추가할수있거든요.
근데 모바일에서는 스페이스바 콤마를 아무리 눌러도 바뀌는것 없이
스페이스바를 누르면 띄워쓰기 콤마를 누르면 콤마가 그냥 붙네요ㅜ
어떻게 해야 모바일에서도 스페이스바를 누르면 자동으로 #이 붙을까요ㅜ
</p>
<p><?
include('script.php');
//태그를 저장할 여분 필드</p>
<p> ?></p>
<p> <input type="hidden" name="<?=$tagCol?>" id="<?=$tagCol?>"></p>
<p> <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></p>
<p>
</p>
<p><script>
$(window).ready(function(){
$(document).on('click','.tag > i',function(){
$(this).parent().remove();
});
$(".ppTag").click(function(){
inputTag($(this).data('word'));
return false;
});</p>
<p> $("#tagIpt").on("keyup", function(event) {
$(".tagListIpt ul li span").removeClass('overlap');
if(event.keyCode == 32){
$(this).val($(this).val().replace(/ /gi, ""));
inputTag($(this).val());
}
});</p>
<p> });</p>
<p> 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);
}</p>
<p> 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;
}
}</p>
<p> return overlap;
}</p>
<p> function inputTag(a){
a = a.replace(/ /g, '');
var linCnt = $(".tagListIpt ul li.tag").length;
if(chkOverlap(a) == false){</p>
<p> 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('');</p>
<p> }
} </p>
<p></script>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
</p>
<p><!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);</p>
<p> var hashtag = [];
content_from.value.replace(/[^\s]+(?:\s|$)/g, function () {
hashtag.push(arguments[0]);
});</p>
<p> var hashtag_edit = hashtag.map((v) => { return '<span class="hashtag">' + v + '</span>'; });
var hashtag_html = hashtag_edit.join(' ');</p>
<p> 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></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
채택
채택
채택
답변대기
채택
채택
채택
답변대기
답변대기
답변대기
채택
채택
채택
채택
채택
채택
채택
답변대기