Spécifier maxlength pour une zone de texte multiligne
J'essaie d'utiliser asp:
<asp:TextBox ID="txtInput" runat="server" TextMode="MultiLine"></asp:TextBox>
Je veux un moyen de spécifier la propriété maxlength, mais apparemment, il n'y a aucun moyen possible pour un multiline textbox. J'ai essayé d'utiliser du JavaScript pour l'événement onkeypress:
onkeypress="return textboxMultilineMaxNumber(this,maxlength)"
function textboxMultilineMaxNumber(txt, maxLen) {
try {
if (txt.value.length > (maxLen - 1)) return false;
} catch (e) { }
return true;
}
Bien que le fonctionnement de cette fonction JavaScript fonctionne correctement, le problème est qu’après l’écriture des caractères, il ne vous permet pas de les supprimer ni de les remplacer. Ce comportement n’est donc pas souhaité.
Avez-vous une idée de ce que je pourrais éventuellement changer dans le code ci-dessus pour éviter cela ou tout autre moyen de le contourner?
essayez ce javascript:
function checkTextAreaMaxLength(textBox,e, length)
{
var mLen = textBox["MaxLength"];
if(null==mLen)
mLen=length;
var maxLength = parseInt(mLen);
if(!checkSpecialKeys(e))
{
if(textBox.value.length > maxLength-1)
{
if(window.event)//IE
e.returnValue = false;
else//Firefox
e.preventDefault();
}
}
}
function checkSpecialKeys(e)
{
if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40)
return false;
else
return true;
}
Sur le contrôle, invoquez-le comme ceci:
<asp:TextBox Rows="5" Columns="80" ID="txtCommentsForSearch" MaxLength='1999' onkeyDown="checkTextAreaMaxLength(this,event,'1999');" TextMode="multiLine" runat="server"> </asp:TextBox>
Vous pouvez également simplement utiliser la fonction checkSpecialKeys pour valider la saisie de votre implémentation JavaScript.
Utilisez plutôt un validateur d'expressions regular. Cela fonctionnera côté client en utilisant JavaScript, mais aussi lorsque JavaScript est désactivé (car la vérification de la longueur sera également effectuée sur le serveur).
L'exemple suivant vérifie que la valeur entrée est comprise entre 0 et 100 caractères:
<asp:RegularExpressionValidator runat="server" ID="valInput"
ControlToValidate="txtInput"
ValidationExpression="^[\s\S]{0,100}$"
ErrorMessage="Please enter a maximum of 100 characters"
Display="Dynamic">*</asp:RegularExpressionValidator>
Il existe bien sûr des expressions rationnelles plus complexes que vous pouvez utiliser pour mieux répondre à vos objectifs.
Rouler le vôtre:
function Count(text)
{
//asp.net textarea maxlength doesnt work; do it by hand
var maxlength = 2000; //set your value here (or add a parm and pass it in)
var object = document.getElementById(text.id) //get your object
if (object.value.length > maxlength)
{
object.focus(); //set focus to prevent jumping
object.value = text.value.substring(0, maxlength); //truncate the value
object.scrollTop = object.scrollHeight; //scroll to the end to prevent jumping
return false;
}
return true;
}
Appelle comme ça:
<asp:TextBox ID="foo" runat="server" Rows="3" TextMode="MultiLine" onKeyUp="javascript:Count(this);" onChange="javascript:Count(this);" ></asp:TextBox>
rester simple. La plupart des navigateurs modernes prennent en charge un attribut maxlength sur une zone de texte (IE inclus), ajoutez-le simplement dans l'attribut code-behind. Pas de JS, pas de Jquery, pas d'héritage, de code personnalisé, pas de chichi, pas de muss.
VB.Net:
fld_description.attributes("maxlength") = 255
C #
fld_description.attributes["maxlength"] = 255
utiliser l'attribut personnalisé maxsize = "100"
<asp:TextBox ID="txtAddress" runat="server" maxsize="100"
Columns="17" Rows="4" TextMode="MultiLine"></asp:TextBox>
<script>
$("textarea[maxsize]").each(function () {
$(this).attr('maxlength', $(this).attr('maxsize'));
$(this).removeAttr('maxsize');
});
</script>
cela rendra comme ça
<textarea name="ctl00$BodyContentPlac
eHolder$txtAddress" rows="4" cols="17" id="txtAddress" maxlength="100"></textarea>
Une autre façon de résoudre ce problème pour les navigateurs (Firefox, Chrome, Safari) qui prennent en charge maxlength sur textareas (HTML5) sans JavaScript est de dériver une sous-classe de la classe System.Web.UI.WebControls.TextBox et de remplacer la méthode Render. Ensuite, dans la méthode substituée, ajoutez l'attribut maxlength avant le rendu normal.
protected override void Render(HtmlTextWriter writer)
{
if (this.TextMode == TextBoxMode.MultiLine
&& this.MaxLength > 0)
{
writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString());
}
base.Render(writer);
}
$('#txtInput').attr('maxLength', 100);
J’ai essayé différentes approches, mais chacune d’elles avait quelques points faibles (par exemple, couper/coller ou compatibilité de navigateur). Voici la solution que j'utilise actuellement:
function multilineTextBoxKeyUp(textBox, e, maxLength) {
if (!checkSpecialKeys(e)) {
var length = parseInt(maxLength);
if (textBox.value.length > length) {
textBox.value = textBox.value.substring(0, maxLength);
}
}
}
function multilineTextBoxKeyDown(textBox, e, maxLength) {
var selectedText = document.selection.createRange().text;
if (!checkSpecialKeys(e) && !e.ctrlKey && selectedText.length == 0) {
var length = parseInt(maxLength);
if (textBox.value.length > length - 1) {
if (e.preventDefault) {
e.preventDefault();
}
else {
e.returnValue = false;
}
}
}
}
function checkSpecialKeys(e) {
if (e.keyCode != 8 && e.keyCode != 9 && e.keyCode != 33 && e.keyCode != 34 && e.keyCode != 35 && e.keyCode != 36 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40) {
return false;
} else {
return true;
}
}
Dans ce cas, j'appelle multilineTextBoxKeyUp sur clé en haut et multilineTextBoxKeyDown sur clé en bas:
myTextBox.Attributes.Add("onkeyDown", "multilineTextBoxKeyDown(this, event, '" + maxLength + "');");
myTextBox.Attributes.Add("onkeyUp", "multilineTextBoxKeyUp(this, event, '" + maxLength + "');");
Les choses ont changé en HTML5:
ASPX:
<asp:TextBox ID="txtBox" runat="server" maxlength="2000" TextMode="MultiLine"></asp:TextBox>
C #:
if (!IsPostBack)
{
txtBox.Attributes.Add("maxlength", txtBox.MaxLength.ToString());
}
HTML rendu:
<textarea name="ctl00$DemoContentPlaceHolder$txtBox" id="txtBox" maxlength="2000"></textarea>
Les métadonnées pour Attributes:
Résumé: obtient la collection d'attributs arbitraires (pour le rendu uniquement) qui ne correspondent pas aux propriétés du contrôle.
Renvoie: Un
System.Web.UI.AttributeCollectionde paires nom/valeur.
Regardez cela . La seule façon de le résoudre est de javascript comme vous l'avez essayé.
EDIT: Essayez de changer l’événement pour appuyer sur la touche.
Utilisez HTML textarea avec runat="server" pour y accéder côté serveur. Cette solution est moins pénible que l’utilisation de javascript ou de regex.
<textarea runat="server" id="txt1" maxlength="100" />
Remarque: pour accéder à la propriété Text du côté serveur, vous devez utiliser txt1.Value au lieu de txt1.Text.
L'exemple suivant dans JavaScript/Jquery fera cela-
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function count(text, event) {
var keyCode = event.keyCode;
//THIS IS FOR CONTROL KEY
var ctrlDown = event.ctrlKey;
var maxlength = $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val().length;
if (maxlength < 200) {
event.returnValue = true;
}
else {
if ((keyCode == 8) || (keyCode == 9) || (keyCode == 46) || (keyCode == 33) || (keyCode == 27) || (keyCode == 145) || (keyCode == 19) || (keyCode == 34) || (keyCode == 37) || (keyCode == 39) || (keyCode == 16) || (keyCode == 18) ||
(keyCode == 38) || (keyCode == 40) || (keyCode == 35) || (keyCode == 36) || (ctrlDown && keyCode == 88) || (ctrlDown && keyCode == 65) || (ctrlDown && keyCode == 67) || (ctrlDown && keyCode == 86))
{
event.returnValue = true;
}
else {
event.returnValue = false;
}
}
}
function substr(text)
{
var txtWebAdd = $("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val();
var substrWebAdd;
if (txtWebAdd.length > 200)
{
substrWebAdd = txtWebAdd.substring(0, 200);
$("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val('');
$("#<%=txtMEDaiSSOWebAddress1.ClientID%>").val(substrWebAdd);
}
}
Cet extrait a fonctionné dans mon cas. Je cherchais la solution et j'ai pensé à l'écrire afin d'aider tout lecteur à venir.
ASP
<asp:TextBox ID="tbName" runat="server" MaxLength="250" TextMode="MultiLine" onkeyUp="return CheckMaxCount(this,event,250);"></asp:TextBox>
Java Script
function CheckMaxCount(txtBox,e, maxLength)
{
if(txtBox)
{
if(txtBox.value.length > maxLength)
{
txtBox.value = txtBox.value.substring(0, maxLength);
}
if(!checkSpecialKeys(e))
{
return ( txtBox.value.length <= maxLength)
}
}
}
function checkSpecialKeys(e)
{
if(e.keyCode !=8 && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=38 && e.keyCode!=39 && e.keyCode!=40)
return false;
else
return true;
}
@ Raúl Roa La réponse a fonctionné pour moi en cas de copier/coller. alors que cela fait.
Voici comment nous l'avons fait (conserve tout le code au même endroit):
<asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"/>
<% TextBox1.Attributes["maxlength"] = "1000"; %>
Juste au cas où quelqu'un utiliserait encore des formulaires Web en 2018 ..
$("textarea[maxlength]").on("keydown paste", function (evt) {
if ($(this).val().length > $(this).prop("maxlength")) {
if (evt.type == "paste") {
$(this).val($(this).val().substr(0, $(this).prop("maxlength")));
} else {
if ([8, 37, 38, 39, 40, 46].indexOf(evt.keyCode) == -1) {
evt.returnValue = false;
evt.preventDefault();
}
}
}
});
vous pouvez spécifier la longueur maximale de la zone de texte multiligne dans pageLoad Javascript Event
function pageLoad(){
$("[id$='txtInput']").attr("maxlength","10");
}
J'ai défini la propriété de longueur maximale de txtInput multiline textbox à 10 caractères dans la fonction Javascript de pageLoad ()
Presque tous les navigateurs modernes prennent désormais en charge l’attribut maxlength pour les éléments textarea. (https://caniuse.com/#feat=maxlength)
Pour inclure l'attribut maxlength sur une zone de texte multiligne, vous pouvez simplement modifier la collection Attributes dans le code situé de la façon suivante:
txtTextBox.Attributes["maxlength"] = "100";
Si vous ne souhaitez pas utiliser le code derrière pour le spécifier, vous pouvez simplement créer un contrôle personnalisé dérivé de TextBox:
public class Textarea : TextBox
{
public override TextBoxMode TextMode
{
get { return TextBoxMode.MultiLine; }
set { }
}
protected override void OnPreRender(EventArgs e)
{
if (TextMode == TextBoxMode.MultiLine && MaxLength != 0)
{
Attributes["maxlength"] = MaxLength.ToString();
}
base.OnPreRender(e);
}
}
Ceci est identique à la réponse de @ KeithK, mais avec quelques détails supplémentaires. Commencez par créer un nouveau contrôle basé sur TextBox.
using System.Web.UI;
using System.Web.UI.WebControls;
namespace MyProject
{
public class LimitedMultiLineTextBox : System.Web.UI.WebControls.TextBox
{
protected override void Render(HtmlTextWriter writer)
{
this.TextMode = TextBoxMode.MultiLine;
if (this.MaxLength > 0)
{
writer.AddAttribute(HtmlTextWriterAttribute.Maxlength, this.MaxLength.ToString());
}
base.Render(writer);
}
}
}
Notez que le code ci-dessus définit toujours le mode texte sur multiligne.
Pour l'utiliser, vous devez l'enregistrer sur la page aspx. Cela est nécessaire car vous devrez le référencer à l'aide de TagPrefix, sinon la compilation se plaindra des contrôles génériques personnalisés.
<%@ Register Assembly="MyProject" Namespace="MyProject" TagPrefix="mp" %>
<mp:LimitedMultiLineTextBox runat="server" Rows="3" ...