Liste complète des attributs de zone de texte en HTML (définir la valeur par défaut, s'adapter à la hauteur, obtenir du contenu, limiter le nombre de caractères saisis, espace réservé)

1.textarea définit la valeur par défaut

<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="提交" >

Ce code définit une zone de texte textarea et la définit masquer

2. la zone de texte est hautement adaptative

Aujourd'hui, nous avons besoin d'une page pour répondre aux commentaires. L'interface initiale donnée par le concepteur est une boîte avec une seule ligne. . Ensuite, j'ai réfléchi à la façon de mieux mettre en œuvre cette interaction, puis je me suis souvenu de ce que Sina Weibo a fait : cliquez sur un commentaire, et une ligne sera affichée par défaut. Lorsque le texte saisi dépasse une ligne ou que la touche Entrée est saisie, la hauteur de. la zone de saisie changera en conséquence jusqu'à ce que la saisie soit terminée. J'ai tout de suite senti que ce détail était plutôt bien réalisé et que je pouvais l'imiter. Vous trouverez ci-dessous deux façons d'obtenir une grande adaptabilité de la zone de texte. L'une consiste à utiliser div pour simuler la zone de texte et à utiliser CSS pour contrôler le style sans js ; l'autre consiste à utiliser JS pour contrôler (en raison de problèmes de compatibilité du navigateur, alors écrivez C'est plus gênant). pour se lever);

Méthode 1 : div simule la zone de texte de la zone de texte pour obtenir facilement une adaptation en hauteur

Étant donné que la zone de texte ne prend pas en charge la hauteur adaptative, définissez simplement la hauteur Ou après le nombre de lignes, des barres de défilement s'afficheront dans la partie excédentaire, ce qui semble inesthétique.

Lors de l'utilisation de DIV pour simuler, le premier problème rencontré est : comment implémenter la fonction d'entrée de div ?

C'est peut-être la première fois que nous voyons cet attribut contenteditable. Par exemple, ajouter contenteditable="true" à un élément de bloc ordinaire permettra l'édition et le curseur apparaîtra. Par exemple,

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

Bien que l'attribut contenteditable soit un contenu en HTML5, IE semble prendre en charge cet attribut de balise depuis longtemps. Il n’y a donc pas lieu de trop s’inquiéter de la compatibilité.

Code 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);
}

Méthode 2 : La zone de texte adapte sa hauteur en fonction du contenu saisi

Adresse de démonstration : http://www.xuanfengge.com/demo /201308/textarea/demo2.html

Cette méthode d'écriture est écrite en JS natif, prenant en compte de nombreux problèmes de compatibilité, et a la même fonction que l'effet de réponse de Sina Weibo. Les enfants intéressés peuvent analyser le code attentivement.

Code 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);
}

Code 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();
};

Code HTML (écrit dans le corps)

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

3 . textarea obtient le contenu

Méthode 1 : JS obtient le contenu de la zone de texte en utilisant document.getElementById(v).value.

Par exemple :

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

Méthode 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 limite le nombre de caractères saisis

Implémente textarea pour limiter le nombre de caractères saisis (y compris le chinois, qui ne peut saisir que 10 caractères, et le code ASCII complet, qui peut saisir 20 caractères)

la zone de texte est appelée zone de texte, également connue sous le nom de zone de texte, c'est-à-dire un contrôle de saisie de texte multiligne avec des barres de défilement, est souvent utilisée dans les formulaires de soumission sur les pages Web. Contrairement au contrôle de texte de zone de texte sur une seule ligne, il ne peut pas limiter le nombre de mots via l'attribut maxlength. Pour cette raison, d'autres méthodes doivent être trouvées pour le limiter afin de répondre aux exigences prédéfinies.

L'approche habituelle consiste à utiliser le langage #scripting pour limiter le nombre de mots saisis dans le champ de texte de la zone de texte, ce qui est simple et pratique. Supposons que nous ayons une zone de texte textarea avec un ID txta1. Nous pouvons limiter ses caractères de saisie au clavier à 10 caractères (caractères chinois ou autres caractères à petits angles) grâce au code suivant :

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

Le principe est le suivant. à L'événement keydown (appui sur une touche du clavier) surveille la zone de texte avec le numéro d'identification spécifié, il ne peut limiter la saisie au clavier que si l'utilisateur colle du texte dans le presse-papiers via le bouton droit de la souris, il ne peut pas contrôler le numéro. de mots.

Saisie via le clavier. Seuls 10 caractères peuvent être saisis dans la zone de texte ci-dessus. Cependant, notre objectif n’a pas été atteint ! Copiez simplement du texte et essayez de le coller avec le bouton droit de la souris et voyez ce qui se passe.

Vous pouvez trouver d'autres scripts JS similaires à ceux ci-dessus sur Internet. Aussi excellents soient-ils, leurs principes sont les mêmes. Ils surveillent les événements de fonctionnement des touches du clavier tels que les touches enfoncées, les touches enfoncées ou les touches enfoncées. La saisie dans la zone de texte ne peut pas empêcher le collage du bouton droit de la souris. Pour cette raison, si nous devons vraiment limiter le nombre de mots dans la zone de texte, nous devons ajouter un autre verrou à la page Web, en désactivant le bouton droit de la souris. cela coûtera sans aucun doute plus cher. En même temps, cela peut aussi être quelque chose que le créateur de la page Web n'est pas nécessairement disposé à faire. En fait, il existe un moyen plus simple, en utilisant l'attribut 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 之间的差异。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!