메인 공지사항 기능소개 매뉴얼     TEST BOARD : [1]  [2]  [3]  [4]  [5]
내용없음9
내용없음10
      APPLICATION
무료 스킨.모듈

유료 스킨.모듈

활용 홈페이지

활용팁 공유

자료 공유

유틸리티

웹 스터디
제작자 리소스

최근 활용팁 공유 RANK
신홍
1
techwear
1
        -- update:30Min --


변덕쟁이 IE에서 innerHTML 쌍따옴표 있다 없다
 application
활용팁 공유
테크노트 사용에 관련된 노하우를 공유하는 게시판입니다.
홈페이지 작업/운용중에 알게 된 여러가지 활용팁을 올려 주세요.
나에겐 그저 습관일 뿐이던 것이 누군가에겐 엄청 큰 힘과 도구가 되는 경우가 많답니다.
자료등록시 적립되는 포인트는 200P 입니다.
     
  작성자 기즈모SOFT ,   http://gizmo.modoo.at
  분 류 응용
ㆍ조회: 646  ㆍ추천: 0         
ㆍ작성일: 2016년 3월 16일 수요일
변덕쟁이 IE에서 innerHTML 쌍따옴표 있다 없다
IE에서 innerHTML 을 사용할때 발생하는 문제입니다.

<table cellspacing="1" cellpadding="1" border="1">
와 같이 나와야 하는데
<table cellspacing=1 cellpadding=1 border=1>
와 같이 처리되어 버립니다.

input value="aaa bbb"
와 같이 값에 공백이 들어간 경우에만 따옴표가 나오고 그렇지 않은 경우 따옴표를 멋대로 생략합니다.

폼필드 형태로 저장된 본문을 열람할 경우input 에 입력된 내용을 input 필드 없이 값을 텍스트로 표현하기 위해

$Body_data['tbody'] = preg_replace("/<input[^>]*value=["]?([^>"]+)["]?[^>]*>/i", '$1', $Body_data['tbody']);

와 같은 처리를 했습니다.

input value=aaa name=cccc
의 경우 'aaa name=cccc'가 다 나와버리네요.
value를 정확하게 찾아내지 못하는 것입니다.

따라서 tbody를 저장할때 innerHTML을 저장하게 되는데, 이때 강제로 쌍따옴표를 넣어주도록 write_script.js 파일의 TnTedit_data_check 함수를 다음과 같이수정했습니다.

TnTwtemphtm=TnTwtemphtm.replace(/</p>/ig,"<br>");
TnTwmainform.tbody.value=TnTwtemphtm; // 입력값전달
↓↓↓
TnTwtemphtm=TnTwtemphtm.replace(/</p>/ig,"<br>");
TnTwtemphtm=TnTwtemphtm.replace(/s+jQuery[0-9]+="?[0-9]+"?/igm,''); // 밑에서 따로 설명
TnTwtemphtm=TnTwtemphtm.replace(/value=([^"'/>s]+)/igm,'value="$1"'); //따옴표 강제 추가
TnTwmainform.tbody.value=TnTwtemphtm; // 입력값전달

일단은 잘 되는것 같습니다.

혹시나 해서 구글을 검색해보니
http://cssdesign.kr/forum/viewtopic.php?id=2668
와 같이 따옴표 문제로 고민중인 사람들이 있더군요.



위에 '밑에서 따로 설명'이라고 되어 있는 부분은 JQuery 를 사용하여 동적으로 이벤트를 활용한 경우 innerHTML 에
jQuery19002267328315708949="45"
와 같은 사용자정의 속성값이 임의로 추가되게 됩니다.
저장을 했더니 tbody 에 저 내용들도 줄줄이 저장되어 있네요.

<INPUTname=cost value=1jQuery19002267328315708949="45">



<INPUTname="cost" value="1">

와 같이 정리됩니다.

================
[[[ 내용 수정 ]]]
================

input 입력내용에 태그문자가 삽입되는 경우 오작동하여 다음과 같이 수정합니다.

write_script.js 파일은 수정하지 않습니다. ( jQuery 부분만 필요에 따라 사용 )
즉, 따옴표가 있든 없든 일단 그냥 저장합니다.
value 에 공백 및 태그문자가 들어가는 경우 자동으로 따옴표 처리됩니다.

본문을 출력하는 파일에 다음과 같음 함수를 추가합니다.
function tagDisable($matches) { // 정규식에서 태그 무효화 & 가시화
return htmlspecialchars($matches[1]);
}

$Body_data['tbody'] 를 다음과 같이 전처리합니다.
$Body_data['tbody'] = preg_replace_callback("/<input[^>]*value="+([^"]+)"+[^>]*>/i", 'tagDisable', $Body_data['tbody']); // 따옴표가 있는 경우 먼저 처리
$Body_data['tbody'] = preg_replace_callback("/<input[^>]*value=([^> ]+)[^>]*>/i", 'tagDisable', $Body_data['tbody']); // 따옴표가 없는 경우 처리
$Body_data['tbody'] = preg_replace("/<input[^>]*>/i", '&nbsp;', $Body_data['tbody']); // input만 있는 경우 처리


       
TECHSTAR
2016-03-17 10:29
좋은팁 감사합니다. ~.~ 북마크완료.ㅎㅎ
     
기즈모SOFT
2016-04-11 02:51
회원사진
DTD를 선언할 경우 IE 도 innerHTML 이용시 쌍따옴표가 붙네요.
     
  0
3500
FILE #1 .
FILE #2 .
FILE #3 .
FILE #4 .
FILE #5 .
FILE #6 .
FILE #7 .
FILE #8 .
FILE #9 .
FILE #10 .
윗글 오름차순 정렬시 null 또는 공백이 먼저 나오는 문제 해결
아래글 게시글 카카오톡 링크 서비스 연동
1187 페이스북 공유시 사진이 안보일 경우 techwear 2017-05-06
1186 방문자의 익스플로러 버전 체크해주는 소스입니다 [1] 신홍 2017-03-07
1185 모바일 웹.. 아이폰, 아이패드 iwindow 레이어 문제 해결 [3]+1 신홍 2017-02-12
1184 모바일에서 주소복사 기능 [1] 신홍 2017-02-10
1183 모바일 [무료모바일프로그램]안드로이드 스튜디오 [2] 작은소망 2017-01-25
1182 게시판에 효율적으로 광고를 하려면... [1] 신홍 2017-01-04
1181 수정 올더게이트 통신 IP 변경 안내 모두모두 2016-12-05
1180 쇼핑몰 회원 장바구니 유지하기 [1] 기즈모SOFT 2016-12-05
1179 수정 커스터마이징된 파일첨부 필드에서 파일 삭제방법 [2] TECHSTAR 2016-10-17
1178 네이트 팀룸으로 메시지 전송~ [2]+2 Terrorboy 2016-09-20
1177 수정 특정 변수값의 한글이 깨질때 사용-삭제 모두모두 2016-09-05
1176 댓글 목록 제한 스크립 추가시 생기는 제한 [1] cherryboyz 2016-07-21
1175 푸시불렛 소스 [2]+4 Terrorboy 2016-06-30
1174 응용 게시물의 날짜 및 시간 변경 [2] 모두모두 2016-05-31
1173 수정 0(제로) 검색 [1] 기즈모SOFT 2016-05-09
1172 운영 종전에 보드 URL을 유보드 URL로 리로딩되게하는 팁. 요나단 2016-04-26
1171 모듈 페이스북처럼 스크롤따라 동영상 재생 컨트롤하는 rolVideo.min... [1]  : DN:1409 rolVideo.min.js : DN:1590 starbros 2016-03-29
1170 DB 오름차순 정렬시 null 또는 공백이 먼저 나오는 문제 해결 기즈모SOFT 2016-03-23
1169 응용 변덕쟁이 IE에서 innerHTML 쌍따옴표 있다 없다 [2] 기즈모SOFT 2016-03-16
12345678910,,,63