웹페이지에 글을 작성하면서 실수로 닫거나 저장이 안되는 경우를 생각해볼 수 있죠. 이런 경우는 누구나 한번쯤 경험해보셨을 겁니다.웹이즈프리의 글 작성은 간단한 cms에서 작성되는데 자동으로 저장되는 기능이 필요하겠다..라는 생각만 가지고 온지 꽤 되었습니다ㅠ그래서! 이번에는 작성중인 글이 일정 시간으로 후에 자동으로 저장되는 기능을 만들어보려합니다. 이 기능은 서버를 이용할 수 있겠지만 html5의 localStorage를 활용해보려합니다. 여기서 원하는 기능을 요약해보면!!일정시간을 설정할 수 있을 것(예제는 60초)로컬(사용자 pc)에 자동으로 저장되며 최근의 버전 세개까지 저장만약 기존과 동일한 경우 저장하지 않음지원되지 않는 브라우저를 고려위 기능은 필수적으로 고려할 내용입니다. 그럼 아래 예제를 봐주세요!# 자바스크립트로 글 작성시 자동으로 저장되는 기능먼저 아래는 html과 css입니다. 간단한 입력폼으로 일정시간이 지나면 저장될 것입니다.! html code입력하면 받기
2017-10-12 08:49:54textarea 태그는 사용자가 입력한 값을 받는데 유용하게 사용할 수 있다. 기본적으로 textarea의 창 크기는 텍스트에 따라 자동으로 변하지 않는다. 하지만 textarea 엘리먼트는 resize가 가능한 인터페이스를 가지고 있어 이를 늘리거나 줄이는 기능을 css를 통해 사용할 수 있다. 만약 textarea 태그를 리사이즈(resizing) 할 경우 좌우 길이나 상하 높이만 조절하려면 어떻게 해야할까?복잡한 스크립트를 떠올릴 수도 있으나 사실 css의 resize 속성을 사용하면 간단하게 해결할 수 있다. resize 옵션은 textarea의 사이즈 변경이 가능한 옵션으로 설정할 경우 크기를 변경하거나 반대로 못하게 할 수 있는 편리한 css 속성이다. 게다가 수평 또는 수직으로만 변경가능한 옵션도 존재한다. 아래는 설정 가능한 옵션값이다.# resize 속성 사용 가능한 값 보기아래는 textarea 태그 resize 속성에 적용 가능한 값들이다.resize: both;
2016-08-17 07:52:15textarea를 사용하여 내용을 보여주고 수정할 수는 없도록 하기위해 disabled 속성을 적용하게되면 익스플로러, ie에서 텍스트색상이 적용되지 않습니다. 태그에 브라우저가 가지는 기본 스타일 값이 우선되기 때문인데 단순 css만으로 해결되지 않으므로 다른 방법이 필요합니다.이를 해결하기 위해 가장 간편한 방법은 바로 disabled 속성을 다른 속성으로 변경하는 것입니다.물론 사용자가 작성이 불가능한 다른 속성을 이용해야겠죠. 사용자가 입력가능하게 하면 안되니까요. 그래서 사용할 속성이 readOnly 입니다.readOnly 속성은 사용자 입력이 불가능하면서 텍스트 색은 그대로 보여주게됩니다. 예를들어...<textarea disabled>blah blah ...</textarea>위 코드는 익스플로러 및 기타 브라우저에서 다른 스타일이 적용되 보여줄 수 있습니다. 이를 아래와 같이 변경합니다.<textarea readOnly>blah blah ...</textarea>
2015-11-04 00:43:45textarea의 경우 height: auto; 속성값을 사용하여 자동으로 높이 조절이 되지 않습니다. 그래서 만약 글이 길어질 경우 스크롤을 내려야만 하는 불편함이 생기게됩니다. 그렇다면 글이 길면 자동으로 길어지는 textarea 태그를 구현하면 사용자 입장에서 매우 편리할 것입니다. 아래는 이를 구현하기 위한 방법입니다.# textarea 자동으로 높이 조절하기자바스크립트를 사용해 자동으로 height가 조절되는 코드를 구현하려면 가장 먼저 현재 textarea 태그가 가진 높이를 알아야만 합니다. 이때 주의할 사항으로 어떤 height값을 알아야하는지가 매우 중요합니다.요소의 높이(Height)는 여러가지 값이 존재하면 일반적으로 innerHeight, outerHeight 등이 있습니다. 이들은 내부 또는 외부 크기를 반환합니다. 하지만 textarea 태그는 높이는 동일하고 내부에 스크롤이 생기기 때문에 스크롤 영역을 포함하는 높이를 알아야 합니다. 이때 prop() 제
2015-11-03 23:02:17textarea 태그에 이미지를 넣는다... 만약 textarea에 이미지를 넣어야한다면 왜 넣으려고 할까요? 가장 큰 이유는 아래일 것입니다.' textarea를 통해 텍스트만 보여주는 것이 아니라 중간에 삽입될 이미지도 함께 보여주고 싶다.'예를 들어 어떤 글을 작성할때 이미지를 함께 첨부하고 싶은데 현재 작성 중인 태그가 textarea 이라면 문제가 발생합니다. 왜냐면 textarea 태그안에 이미지 삽입은 불가능하죠... 방법이 없을까요?# textarea에 img 태그는 추가 불가결론부터 말하면 textarea에 이미지를 넣는 것은 불가능합니다. 이미지를 위한 img 태그뿐만 아니라 스타일을 변경하기 위한 모든 태그들을 넣을 수가 없습니다. 그래서 이 방법이 아닌 다른 방법을 찾아야합니다.'이미지 첨부가 가능한 div 태그를 사용하고 contentEditable 속성을 사용한다.' 이때 사용 가능한 방법은 태그에 contentEditable 속성을 사용하는 방법입니다. <
2015-09-18 10:15:49안녕하세요. 오늘 알고자 하는 것은 무엇이냐? ... 바로 방문자가 게시판에 글 또는 댓글을 적는 경우 서버와 웹사이트간의 데이터를 전송하기 위한 방법에 대하여 알아보고자 합니다. 언제 서버와 웹사이트간의 데이터 전송이 필요한가...첫째. 게시판에 새로운 글로 저장하려는 경우둘째. 이전의 글을 수정하기 위해 데이터베이스(DB)에서 불러와 textarea 태그에 넣어줄때...위 두가지로 요약할 수 있습니다. 오늘 제가 얘기하고자 하는 부분은 바로 두번째... 이전의 글을 수정하기 위해 서버와 웹사이트 간의 전송에 관한 부분입니다. 조금 어려울 수도 있으나 서버사이드를 공부하신 분은 대부분 이해할 수 있으실거라 생각됩니다... 혹시 모르시면 댓글을 남겨주세요. 그럼 아래 내용부터 알아볼까요?[ 1 ] textarea 태그에 작성 된 글을 서버(데이터베이스)로 전송하기(옮기기)i. DB에 저장할때 편리한 함수를 사용하여 저장하면 편리; replaceAll(), str_replace(),
2014-09-24 16:02:30웹페이지를 완료 후 마무리로 크로스 브라우징을 위해 익스플로러를 확인해보니 IE 8에서 수평 스크롤이 안 보이게 하는 overflow가 적용되지 않더군요...다른 브라우저들은 모두 문제 없이 잘 적용되었는데 말이죠. 어찌되었던 해결방법을 찾아봤습니다.i. 그외 다른 방법을 시도-ms-overflow-x: hidden;*overflow-x: hidden;위와 같이 혹시나 핵을 사용하면 될까라는 생각이 들어서 트라이했지만 결국 안되더군요... 하지만, 결국 방법을 찾았습니다. 바로 CSS의 position속성을 변경하니 되는군요...ii. position 속성으로 해결position: static -> position: relative; // 기본값이 static으로 되어있는데 이를 relative로 수정함.인터넷을 찾다보니 jQuery를 통해서 해결이 가능하다는데 해보지는 않았습니다. 그래도 잘 적용되니 다행이네요. 비슷한 이슈가 있으시면 위 방법을 사용해 보시길 바랍니다.
2014-09-03 05:41:20웹사이트의 방문자가 textarea 태그의 박스크기, 사이즈를 임의로 수정을 못하게 하는 방법을 알아보겠습니다. 어떻게해야할까요? 아래에서 알아봅니다.먼저 textarea 태그는 주로 게시판이나 댓글에 사용됩니다. 이때 textarea 태그는 기본값으로 사용자가 임의 사이즈를 변경 가능토록되어있습니다. 이때 방문자가 임의변경을 못하게 하려면? 바로 css의 resize 속성값을 변경해야합니다.# textarea 변경 못하도록 고정하는 방법아래는 resize 속성을 사용하여 방문자가 사이즈를 변경하지 못하도록 막는 예제입니다. 그럼 아래 소스를 봐주세요.@ textarea.html<div> <textarea class="noresize"></textarea></div>이제 태그에 css의 resize를 사용해보겠습니다. 아래와 같이 css를 적용합니다. 이때 적용 가능한 값이 몇 가지 존재합니다. 원하는 값으로 설정하면 됩니다.@textarea.css.noresize { resi
2014-01-25 16:04:43textarea 태그는 홈페이지를 만들때 많이 사용되는 태그 중 하나입니다. 사용자의 입력을 받아 처리할 수 있는 입력폼으로 일반적인 레이아웃에 관련 속성외에 이벽값에 대한 추가적인 속성을 가지고 있습니다.입력폼의 경우 자주 사용되는 태그는 보통 짧은 글이나 문장에 input 태그가 사용되고 긴 글 또는 띄어씌기를 보여줘야하는 경우는 대부분 textarea 태그가 사용됩니다.아래는 textarea 태그의 모습입니다.<textarea>입력할 내용</textarea>! textarea 태그 특징은?textarea 태그의 가장 큰 특징은 입력폼 안에 사용된 태그 및 띄어쓰기가 그대로 출력되는 점입니다. 그렇기 때문에 별도의 띄어쓰기 및 줄바꿈 태그등이 없이 사용자가 입력한 내용이 그대로 표현되죠. 그리고, 자주 쓰이는 속성중에 readonly가 있으며 이는 읽기만 가능하도록 해주는 속성입니다. 읽기만 가능하기 때문에 사용자가 글을 적을 수 없게 비활성화됩니다. 그럼 아래 예제를 참고하세요
2014-01-21 10:11:12제이쿼리를 사용하여 input 태그 그리고 textarea 태그를 활성화 또는 비활성화로 변경하는 방법을 알아봅니다. 입력폼인 위 태그를 활성화 또는 비활성화 할 경우 글 입력(작성)이 가능 또는 불가능하게 변경할 수 있습니다. 그렇다면 아래는 이를 바꾸는 방법입니다. $(ele).attr('disabled', 'disabled');# 제이쿼리 attr()함수를 사용한 비활성 방법이 방법은 jQuery를 사용하여 해당태그에 속성값 disabled를을 추가하는 방법입니다. attr() 메소드를 사용하면 속성과 속성값을 추가할 수 있습니다. attr() 메소드를 사용하는 간단한 예제는 아래에서 알아봅니다.# 글입력폼 비활성화 예제보기, attr('disabled')아래 예제를 봐주세요. 버튼을 클릭할 경우 활성화에서 비활성화로 변경되는 간단한 예제입니다.<input type="text" placeholder="site name" /><button id="sitename">Disable<
2014-01-09 14:58:15
