웹사이트의 방문자가 textarea 태그의 박스크기, 사이즈를 임의로 수정을 못하게 하는 방법을 알아보겠습니다. 어떻게해야할까요? 아래에서 알아봅니다.
먼저 textarea 태그는 주로 게시판이나 댓글에 사용됩니다. 이때 textarea 태그는 기본값으로 사용자가 임의 사이즈를 변경 가능토록되어있습니다. 이때 방문자가 임의변경을 못하게 하려면? 바로 css의 resize 속성값을 변경해야합니다.
# textarea 변경
못하도록 고정하는 방법아래는 resize 속성을 사용하여 방문자가 사이즈를 변경하지 못하도록 막는 예제입니다. 그럼 아래 소스를 봐주세요.
@ textarea.html
<div>
<textarea class="noresize"></textarea>
</div>
이제 태그에 css의 resize를 사용해보겠습니다. 아래와 같이 css를 적용합니다. 이때 적용 가능한 값이 몇 가지 존재합니다. 원하는 값으로 설정하면 됩니다.
@textarea.css
.noresize {
resize: none; /* 사용자 임의 변경 불가 */
resize: both;
/* 사용자 변경이 모두 가능 */
resize: horizontal; /* 좌우만 가능 */
resize: vertical; /* 상하만 가능 */
}
여기서 상하좌우 리사이징을 막으려면 resize: none을 적용하면 되죠.
resize: none
이처럼 원하는 값을 CSS에 설정하여 resize를 선택할 수 있습니다. resize 속성에는 위와 같이 여러가지 값을 선택하여 적용할 수 있습니다. none을 사용하여 상하, 좌우 모두 변경 불가능하도록 막는 방법도 있지만 vertical 값 역시 많이 사용됩니다.
! resize에 더 많이 사용되는
none 그리고 vertical값
none의 경우 방문자에게 임의 수정을 모두 불가능하도록 변경하지만 vertical의 경우 상하 변경만 가능하도록 부분 허용합니다. 일반적으로 반응형웹 페이지가 많기 때문에 좌우 width값의 변경은 Layout에 영향을 줄 수 있으므로 horizontal이 아닌 vertical이 많이 사용됩니다. 또한 사용자의 시아에서도 입력된 텍스트가 세로로 길어지는 것이 좌우로 길어지는 것보다 인지하기 더 쉽고 편하겠죠.
<input type="text" />
위와 같은 input 개체가 있을 때,
글 쓰지 못하게 막는 방법 중,
대표적으로 readonly 와 disabled 가 있다.
이 둘 모두 input 타입의 속성이다.
따라서 다음과 같이 사용할 수 있다.
using html
<input type="text" id="txt1" readonly />
<input type="text" id="txt2"
disabled />
<textarea id="txtfield1" readonly ></textarea>
<textarea id="txtfield2" disabled ></textarea>
<input type="password" id="pass1" readonly />
<input type="password" id="pass2" disabled />
using script
var oEle1 = document.getElementById('txt1') ;
var oEle2 = document.getElementById('txt2') ;
var oEle3 = document.getElementById('txtfield1') ;
var oEle4 =
document.getElementById('txtfield2') ;
var oEle5 = document.getElementById('pass1') ;
var oEle6 = document.getElementById('pass2') ;
//
"readOnly" 로서 대문자임에 유의한다.
oEle1.readOnly = true ;
oEle2.readOnly = true ;
oEle3.readOnly = true ;
oEle4.readOnly = true ;
oEle5.readOnly = true ;
oEle6.readOnly = true ;
oEle1.disabled = true ;
oEle2.disabled = true ;
oEle3.disabled = true ;
oEle4.disabled
= true ;
oEle5.disabled = true ;
oEle6.disabled = true ;
comment : 'readonly' , 'disabled' 둘다 사용자의 입력을 하지 못하게 막는 기능은 동일하지만,
form 안에서 사용하였을 경우,
'readonly' 는 form 전송이 가능하지만,
'disabled' 는 form 전송시 값이 전달되지 않는다.
textarea 텍스트 입력 영역 비활성화, 활성화 예제$("#textarea").attr("readonly", true); $(".edit").click(function(event) { $("#textarea").attr("readonly", false); });
크롬에서는 상관없으나 익스플로러에는 커서가 깜박여서 활성화된 듯한 착각을 불러일으키므로 포커스를 제거해준다onfocus="this.blur()" 를 사용하거나 disabled를 이용해준다.
요소의 비활성 readonly, disabled 차이와 사용법
reaonly 와 disabled는 보통 웹 페이지에서 어느 특정 요소를 비활성화 처리할 때 사용
(readonly는 text요소, 나머지 요소는 disabled 사용)
하지만 이 둘의 가장 큰 차이점은 DOM 객체에서 읽을 수 있느냐없느냐로
readonly의 경우 객체는 읽으나
객체의 쓰기를 비활성화하지만 disabled 된 요소는 DOM 객체를 아예 읽지 않는다.
그러나 예외는 있다고 disabled 된 요소의 값을 간단히 서블릿으로 전달하는 2가지 방법이 있으며 아래와 같다.
1) hidden 으로 해당 값을 전달하는 방법으로 disabled된 요소의 값을 hidden된 input요소의 value 에 넣어 전달
2) submit이나 serialize 하기 전 해당 요소의 disabled 속성을 제거했다가 전송 후 다시 disabled
how can i make textarea a read only but will not be greyed out?
i am using this script but its not working:
$(".readonly").keydown( function keydown(e) { if(!e.ctrlKey) return false; // Cancel non ctrl-modified keystrokes if(e.keyCode == 65) return true;// 65 = 'a' if(e.keyCode == 67) return true;// 67 = 'c' return false; } )i tried to use <textarea readonly> but its making the field greyed out, I want it to be readonly but dont want the textarea field to change to being greyed out.
here is my entire code:
<body> <form name="search" method="post" action=""> <fieldset style='width: 500px'> <legend align='left'><strong>Search</strong></legend> <p> Seach for: <input type="text" name="find" id="find" /> in <Select NAME="field" id="field"> <Option VALUE="testA">A</option> <Option VALUE="testB">B</option> <Option VALUE="testC">C</option> <Option VALUE="testD">D</option> </Select> <input type="hidden" name="searching" value="yes" /> <input type="submit" name="search" id="search" value="Search" /> </p> </fieldset> </form> <script> $(".readonly").keydown( function keydown(e) { if(!e.ctrlKey) return false; // Cancel non ctrl-modified keystrokes if(e.keyCode == 65) return true;// 65 = 'a' if(e.keyCode == 67) return true;// 67 = 'c' return false; } ) </script> <?php //This is only displayed if they have submitted the form if (isset($_POST['searching']) && $_POST['searching'] == "yes") { //If they did not enter a search term we give them an error if (empty($_POST['find'])) { echo "<p>You forgot to enter a search term"; exit; } // Otherwise we connect to our Database mysql_connect("host", "username", "passw") or die(mysql_error()); mysql_select_db("testdb") or die(mysql_error()); // We preform a bit of filtering $find = strtoupper($_POST['find']); $find = strip_tags($_POST['find']); $find = trim ($_POST['find']); $field = trim ($_POST['field']); //Now we search for our search term, in the field the user specified $data = mysql_query("SELECT * FROM testtable WHERE UPPER($field) LIKE UPPER('%$find%')"); //And we display the results while($result = mysql_fetch_array( $data )) { $myRes = "<form action='' method='post'> <fieldset style='width: 10px'> <legend align='left'><strong>Results</strong></legend> <p> <table width='auto' border='1' cellspacing='1' cellpadding='1' align='center'> <tr> <th align='center' scope='row'>A</th> <td><textarea class=readonly name=testA id=testA cols=65 rows=3>" . $result['testA'] . "</textarea></td> </tr> <tr> <th scope='row'>B</th> <td><textarea class=readonly name=testB id=testB cols=65 rows=3>" . $result['testB'] . "</textarea></td> </tr> </table> </p> </fieldset> </form>"; } echo $myRes; //This counts the number or results - and if there wasn't any it gives them a little message explaining that $anymatches=mysql_num_rows($data); if ($anymatches == 0) { echo "Sorry, but we can not find an entry to match your query<br><br>"; } //And we remind them what they searched for echo "<b>Searched For:</b> " .$find; } ?> </body>asked Nov 14, 2013 at 15:13
user2579439user2579439
1,1733 gold badges13 silver badges13 bronze badges
4
You could use css
something like
textarea[readonly="readonly"], textarea[readonly] { //your styling }eg
textarea[readonly="readonly"], textarea[readonly] { background-color:white; }Also note that the mysql_ functions have been deprecated. You should MySQLi or PDO with prepared statements.
Looking at your code you are using class=readonly, unless you've actually created that class in css you should be using
<textarea readonly></textarea>answered Nov 14, 2013 at 15:15
6