<![CDATA[
<p>Change Document Title On Button Click With Javascript</p><p> </p><p><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><!DOCTYPE html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><html> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>body{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>background: #eeeded;} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>textarea{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>width:100%;} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>.auto-resize, #autoResize{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   height:45px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  display: block;  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  overflow: hidden;  </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  resize: none; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-left:0px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-right:0px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  border-top:0px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  margin-bottom:50px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width:100%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding:15px; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  padding-bottom:0px} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  textarea:focus{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  outline:none} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  .textarea-container{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  width:50%; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  position:relative; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  left:100px;} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   .textarea-container h3{ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>   color:blue} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></style> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><div class="textarea-container"> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><h3>Default Textarea</h3> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><textarea placeholder="Enter Text Here..."> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></textarea> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><h3>Auto Resize Single Textarea</h3> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><h3>Auto Resize Multiple Textarea </h3> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><textarea class="auto-resize"  placeholder="Enter Text Here..."> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></textarea> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><textarea class="auto-resize"  placeholder="Enter Text Here..."> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></textarea> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><textarea class="auto-resize"  placeholder="Enter Text Here..."> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></textarea> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></div> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>var multipleFields=document.querySelectorAll('.auto-resize'); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>for(var i=0; i<multipleFields.length; i++){ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>multipleFields[i].addEventListener('input',autoResizeHeight,0); </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>// auto resize multiple textarea </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>function autoResizeHeight(){ </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  this.style.height="auto"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  this.style.height= this.scrollHeight+"px"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>  this.style.borderColor="green"; </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>} </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></script> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body> </b></span><br><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p> </p><p> </p><p> </p><p>Change Document Title On Button Click With Javascript</p><div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/Yor9Y73M764?si=dLe9jrqYGVWHSjod" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/Yor9Y73M764?si=dLe9jrqYGVWHSjod" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZYvM/20320e03430c4fe5820ee1f1ca1fac9b9735f94e" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZYvM/20320e03430c4fe5820ee1f1ca1fac9b9735f94e" data-origin-width="600" data-origin-height="345"></div>
<!-- -->
]]>
카페 게시글
◈─---… HTML 갤러리
Change Document Title On Button Click With Javascript
gyun님
추천 0
조회 3
23.11.27 09:06
댓글 4
다음검색
첫댓글 https://www.w3schools.com/css/tryit.asp?filename=trycss_default
https://www.google.com/search?client=avast-a-1&q=How+to+Auto+Resize+Textarea+using+HTML+CSS+%26+JavaScript&ie=UTF-8#ip=1
https://www.google.com/search?q=How+to+Auto+Resize+Textarea+using+HTML+CSS+%26+JavaScript&client=avast-a-1&sca_esv=585486504&tbm=isch&sxsrf=AM9HkKmyykB0OCNinva-u5qNP0LSAK-eIQ:1701043910647&source=lnms&sa=X&ved=2ahUKEwiehaqw8uKCAxVnha8BHejvCKkQ_AUoA3oECAQQBQ&biw=1904&bih=942&dpr=1
https://stackoverflow.com/questions/58073030/how-to-auto-resize-the-textarea-to-fit-the-content