HTML의 전체 텍스트 영역 속성 목록(기본값 설정, 높이 적응, 콘텐츠 가져오기, 입력 문자 수 제한, 자리 표시자)

1.textarea는 기본값을 설정합니다

<span style="font-family: Arial, Helvetica, sans-serif; white-space: normal; background-color: rgb(255, 255, 255); ">
HTML:</span><form action="test" name="myForm" onsubmit="set()">

<textarea rows="0" cols="0" name="jsonHidden" readonly="readonly" style="display:none;"></textarea>

<input type="submit" value="提交" >

이 코드는 텍스트 영역 텍스트 상자를 설정하고 숨기도록 설정합니다.

2.textarea는 적응력이 뛰어납니다

오늘은 댓글에 답할 페이지가 필요합니다 , 디자이너 주어진 초기 인터페이스는 한 줄만 있는 상자입니다. 그러다가 이 상호작용을 어떻게 더 잘 구현할 수 있을까 고민하다가 시나 웨이보가 했던 일이 떠올랐습니다. 댓글을 클릭하면 기본적으로 한 줄이 표시됩니다. 입력한 텍스트가 한 줄을 초과하거나 Enter를 입력하면 높이가 표시됩니다. 입력 상자는 입력이 완료될 때까지 그에 따라 변경됩니다. 나는 즉시 이 세부 사항이 아주 잘 이루어졌고 흉내낼 수 있다고 느꼈습니다. 아래에는 텍스트 영역의 높은 적응성을 달성하는 두 가지 방법이 있습니다. 하나는 div를 사용하여 텍스트 영역을 시뮬레이션하는 것이고, 다른 하나는 JS를 사용하여 제어하는 ​​것입니다(브라우저 호환성 문제 때문에 작성이 더 까다롭습니다.) 일어나기);

방법 1: div는 높이 적응을 쉽게 달성하기 위해 텍스트 영역 텍스트 필드를 시뮬레이션합니다.

텍스트 영역은 적응형 높이를 지원하지 않기 때문에, 즉 높이나 줄 수를 설정한 후 스크롤 막대가 초과된 부분이 표시되어 보기에 좋지 않습니다.

DIV를 사용하여 시뮬레이션할 때 가장 먼저 직면하는 문제는 div에서 입력 기능을 어떻게 구현합니까?

아마도 이 contenteditable 속성을 본 것은 이번이 처음일 것입니다. 예를 들어 일반 블록 요소에 contenteditable="true"를 추가하면 편집이 가능해지고 커서가 나타납니다. 예를 들어

<div contenteditable="true"></div>

HTML5에서는 contenteditable 속성이 content인데 IE에서는 오랫동안 이 태그 속성을 지원해 온 것 같습니다. 따라서 호환성에 대해 너무 걱정할 필요가 없습니다.

CSS 코드

.textarea{
    width:400px;
    min-height:20px;
    max-height:300px;
    _height:120px;
    margin-left:auto;
    margin-right:auto;
    padding:3px;
    outline:0;
    border:1pxsolid#a0b3d6;
    font-size:12px;
    line-height:24px;
    padding:2px;
    word-wrap:break-word;
    overflow-x:hidden;
    overflow-y:auto;
 
    border-color:rgba(82,168,236,0.8);
    box-shadow:inset01px3pxrgba(0,0,0,0.1),008pxrgba(82,168,236,0.6);
}

방법 2: 텍스트 상자 텍스트 영역은 입력 내용에 따라 높이를 조정합니다.

Demo 데모 주소: http://www.xuanfengge.com/demo/201308/textarea/demo2.html

This 작성 방식은 기본 JS에서 Written을 사용하는 것이므로 호환성 문제를 많이 고려했으며 Sina Weibo의 답글 효과와 기능이 완전히 동일합니다. 관심 있는 어린이는 코드를 주의 깊게 분석할 수 있습니다.

CSS 코드

#textarea
 { 
    display:block;
    margin:0auto;
    overflow:hidden;
    width:550px;
    font-size:14px;
    height:18px;
    line-height:24px;
    padding:2px;
}
textarea{
    outline:0none;
    border-color:rgba(82,168,236,0.8);
    box-shadow:inset01px3pxrgba(0,0,0,0.1),008pxrgba(82,168,236,0.6);
}

JS 코드

/**
 * 文本框根据输入内容自适应高度
 * @param                {HTMLElement}        输入框元素
 * @param                {Number}                设置光标与输入框保持的距离(默认0)
 * @param                {Number}                设置最大高度(可选)
 */
var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
        isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
                addEvent = function (type, callback) {
                        elem.addEventListener ?
                                elem.addEventListener(type, callback, false) :
                                elem.attachEvent('on' + type, callback);
                },
                getStyle = elem.currentStyle ? function (name) {
                        var val = elem.currentStyle[name];
 
                        if (name === 'height' && val.search(/px/i) !== 1) {
                                var rect = elem.getBoundingClientRect();
                                return rect.bottom - rect.top -
                                        parseFloat(getStyle('paddingTop')) -
                                        parseFloat(getStyle('paddingBottom')) + 'px';        
                        };
 
                        return val;
                } : function (name) {
                                return getComputedStyle(elem, null)[name];
                },
                minHeight = parseFloat(getStyle('height'));
 
        elem.style.resize = 'none';
 
        var change = function () {
                var scrollTop, height,
                        padding = 0,
                        style = elem.style;
 
                if (elem._length === elem.value.length) return;
                elem._length = elem.value.length;
 
                if (!isFirefox && !isOpera) {
                        padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
                };
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 
                elem.style.height = minHeight + 'px';
                if (elem.scrollHeight > minHeight) {
                        if (maxHeight && elem.scrollHeight > maxHeight) {
                                height = maxHeight - padding;
                                style.overflowY = 'auto';
                        } else {
                                height = elem.scrollHeight - padding;
                                style.overflowY = 'hidden';
                        };
                        style.height = height + extra + 'px';
                        scrollTop += parseInt(style.height) - elem.currHeight;
                        document.body.scrollTop = scrollTop;
                        document.documentElement.scrollTop = scrollTop;
                        elem.currHeight = parseInt(style.height);
                };
        };
 
        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
};

HTML 코드(본문에 작성됨)

<textareaid="textarea"placeholder="回复内容"></textarea>
    <script>
        vartext=document.getElementById("textarea");
        autoTextarea(text);//
 调用
    </script>

3. Textarea가 콘텐츠를 가져옵니다

방법 1: JS는 document.getElementById(v) 값을 사용하여 텍스트 영역의 콘텐츠를 가져옵니다. 괜찮아요.

예:

<textarea id="abc" name="t" cols="72" rows="12">123456</textarea>
<script>
var x=document.getElementById("abc").value;/这个x的值就是获取到的内容
alert(x);
</script>

방법 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<textarea id=&#39;myText&#39;>这里是textarea内容</textarea>
<script type="text/javascript" src="Js/jquery-1.7.js"></script>
<script type="text/javascript">
alert("JS获取方式："+document.getElementById("myText").value);//JS
alert("JQuery获取方式："+$("#myText").val());//Jquery
</script>
</body>
</html>

4. textarea는 입력 문자 수를 제한합니다.

textarea는 입력 문자 수를 제한합니다(중국어 포함, 10개만 입력 가능). , 전체 ASCII 코드는 20개를 입력할 수 있습니다.

텍스트 영역은 텍스트 영역이라고도 하며 스크롤 막대가 있는 여러 줄의 텍스트 입력 컨트롤로 웹 페이지의 제출 양식에 자주 사용됩니다. 한 줄짜리 텍스트 상자 텍스트 컨트롤과 달리 maxlength 속성을 통해 단어 수를 제한할 수 없으므로 미리 설정된 요구 사항을 충족하도록 제한하려면 다른 방법을 찾아야 합니다.

일반적인 접근 방식은 #스크립팅 언어를 사용하여 텍스트 영역 텍스트 필드에 입력되는 단어 수를 제한하는 것인데, 이는 간단하고 실용적입니다. ID가 txta1인 텍스트 영역 텍스트 영역이 있다고 가정합니다. 다음 코드를 통해 키보드 입력 문자를 10자(한자 또는 기타 작은 각도 문자)로 제한할 수 있습니다.

＜script language="#" type="text/ecmascript"＞ 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{    
    if(this.value.length >= 10) 
      event.returnValue = false; 
} 
} 
＜/script＞

원칙은 키다운(키보드)을 누르는 것입니다. 키) (하단) 이벤트는 지정된 ID 번호로 텍스트 영역을 모니터링합니다. 짐작할 수 있듯이 사용자가 마우스 오른쪽 버튼을 통해 클립보드에 텍스트를 붙여넣는 경우 키보드 입력만 제한할 수 있습니다. 단어.

키보드로 입력하면 위 텍스트 영역에 10자까지만 입력할 수 있습니다. 그러나 우리의 목표는 달성되지 않았습니다! 일부 텍스트를 복사하고 마우스 오른쪽 버튼으로 붙여넣고 무슨 일이 일어나는지 확인하세요.

위와 유사한 다른 JS 스크립트는 아무리 우수하더라도 keydown, keyup 또는 keypress와 같은 키보드 키 조작 이벤트를 통해 텍스트 영역의 입력을 모니터링하는 원리는 동일합니다. 마우스 오른쪽 버튼을 붙여넣는 것을 방지합니다. 이러한 이유로 텍스트 영역의 단어 수를 실제로 제한해야 한다면 웹 페이지에 또 다른 잠금을 추가해야 합니다. 마우스 오른쪽 버튼을 비활성화하면 의심할 여지 없이 추가 비용이 발생합니다. 웹 페이지 작성자에게도 문제가 될 수 있습니다. 실제로 onpropertychange 속성을 사용하는 더 간단한 방법이 있습니다.

onpropertychange可以用来判断预定元素的value值，当元素的value值发生变化时判断事件就会被触发，仅关心被监测元素的value值，避开了输入的来源，从而可以比较理想地达成我们的限制字数这一目的。它属于JS范畴，可以在表单方框区代表中嵌套使用，以下是代码和效果样式，可以像上面那样测试输入，你会发现它真正达到目的：不管用什么方式输入，它只能输入100个字（汉字或其他小解符号）：

代码：

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

当然，为了更为保险，处理表单数据的后台脚本程序还应该对提交来的数据进行再一次的检测，如果字数超出预设的数量则进行相应处理，这样才达到真正限制字数的目的。（完）

另外一种方法实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个）

<script> 
function check() { 
var regC = /[^ -~]+/g; 
var regE = /\D+/g; 
var str = t1.value; 
if (regC.test(str)){ 
    t1.value = t1.value.substr(0,10); 
} 
if(regE.test(str)){ 
    t1.value = t1.value.substr(0,20); 
} 
} 
</script> 
<textarea maxlength="10" id="t1" onkeyup="check();"> 
</textarea>

 还有一种方式：

function textCounter(field, maxlimit) { 
if (field.value.length > maxlimit){ 
field.value = field.value.substring(0, maxlimit); 
}else{ 
document.upbook.remLen.value = maxlimit - field.value.length; 
} 
}

<textarea name=words cols=19 rows=5 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea> 剩余字数: <input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>
 
 
function LimitTextArea(field){  
   maxlimit=200;    
    if (field.value.length > maxlimit)     
     field.value = field.value.substring(0, maxlimit);           
}
<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" >
</textarea>

 

title="The textarea width must less than 300 characters." 放在textarea 里面提示输入最大字节数。

例如：

<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

5.textarea 换行

最近碰到一个数据转来转去转到Textrea里面是否能真正按行存放的问题，在这里总结一下：

问题描述：

比如get数据到一个TextArea里面，如“AAA BBB”，想把这段文字在TextArea里面真正按行存放，而不是显示出来按行存放（所谓的真正按行存放就是，再把这个TextArea的数据post到另外一个页面的Textarea里面仍是按行存放）

问题解决1：

一开始是提交数据的时候格式是AAA
BBB，但是这是显示换行，其实在TextArea里面并不是真正按行存放的，因为这个时候再提交给另外一个TextArea的时候就是显示AAABBB，而不是换行显示了，因此仅仅是显示按行存放而已

问题基础知识：

HTML里面的换行是
,而TextArea的换行是/n

问题解决2：

先提交数据再使用Javascript对
和/n进行替换

提交的时候仍是
作为分隔符

然后提交完毕以后

 <script>
         //换行转回车
         var haha=document.getElementById("SendTextArea").value;
         haha=haha.replace(&#39;<br />&#39;,&#39;/n&#39;);
         document.getElementById("SendTextArea").value=haha;
 </script>

6.textarea固定大小

TML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小：

1：彻底禁用拖动（推荐）

resize: none;

2：只是固定大小，右下角的拖动图标仍在

width: 200px;    
height: 100px;    
max-width: 200px;    
max-height: 100px;

3：浏览器信息：

Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.218 Safari/535.1

7.textarea value

最近在做一个小项目，才发现原来textarea中居然没有value属性。

<tr>    
  <th>姓名*</th>       
  <td><span><input type="text" class="TextBox" id="xm" name="xm" /></span></td>
</tr>
<!--平时用<input>标签比较多，一般在其内添加个value属性就可以获取到值，但是在<textarea>标签中添加该属性却获取不到相应的值，具体解决的办法是用以下的格式即可：-->
<textarea>(在这里添加内容)</textarea>

8.textarea placeholder

placeholder 属性适用于以下的 类型：text, search, url, telephone, email 以及 password。
这个属性是html5才有的新属性，原来的HTML 4.01 与 HTML 5 之间的差异。

위 내용은 HTML의 전체 텍스트 영역 속성 목록(기본값 설정, 높이 적응, 콘텐츠 가져오기, 입력 문자 수 제한, 자리 표시자)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!