web-dev-qa-db-fra.com

Comment forcer ASP: TextBox à être de type email?

J'ai une application ASP.NET 3.5 et j'aimerais ajouter le type="email" conformément aux normes HTML5, mais si j'ajoute le type sur le contrôle ASP:TextBox, la sortie ci-dessous s'affiche:

<input name="ctl00$content$txtEmailAddress" type="text" type="email" value="" 
id="ctl00_content_txtEmailAddress" class="input-block-level" required="required"/>

Comment puis-je remplacer l'attribut type de "text" à "email"?

asp.nethtml5validation
14
SollyM

Si vous utilisez .Net 3.5, quel que soit le type que vous avez spécifié avec <asp:TextBox>, il restituera toujours avec <input type="text" />. Donc, dans ce cas, vous pouvez utiliser une entrée HTML simple avec type = "email"

<input type="email" />

Pour la version 4.5, vous pouvez utiliser TextMode="Email"

<asp:TextBox ID="txtmyBox" runat="server" TextMode="Email"></asp:TextBox>
32
Sachin

Désolé, je suis un peu en retard à la fête, bien que je pense que d'autres peuvent tirer profit de ce que j'ai fait. J'ai une page qui est HTML 5 bien que nous ayons toujours .NET 3.5. Nous voulions garder l’élément .NET, bien que le type soit changé en email. J'ai essayé plusieurs méthodes, bien que celle qui a fonctionné pour moi soit la suivante: j'ai ajouté une propriété JavaScript à l'élément lui-même en ligne (lorsque je le mets dans une balise de script, il ne prend pas pour une raison quelconque ...)
Voici à quoi ressemblerait votre tag si vous utilisiez mes modifications: 

<asp:TextBox runat="server" type="email" onfocus="this.type='email'"/> 

Eli 

4
Eli

Vous pouvez utiliser comme ça ..

 <asp:TextBox runat="server" type="email" />

La nouvelle syntaxe vous permet de définir un contrôle TextBox compatible avec HTML5. Par exemple, le code suivant définit un contrôle TextBox compatible HTML5:

<asp:TextBox runat="server" type="some-HTML5-type" />

Vous pouvez vous référer à ce lien http://support.Microsoft.com/kb/2468871 et accéder à la fonctionnalité 3.

0
Vishnu Vikraman

si vous souhaitez afficher un aperçu de la liste de diffusion en fonction des caractères que vous saisissez et de l'historique des noms de messagerie dans le navigateur, vous devez définir le nom de l'ID d'élément simplement "e-mail". mais toutes les méthodes fonctionnent principalement sur chrome:

<asp:TextBox ID="email" runat="server" CssClass="YourEmailCss"></asp:TextBox>

ou, si vous utilisez des éléments standard HTML:

<input id="email" type="email" name="email" />
0
mohsen solhnia

Ma solution (mise à jour vers .Net 4.5) s'est terminée ainsi avec un script en ligne, l'ID d'élément est visible si vous inspectez l'élément d'entrée HTML rendu. 

<label class="input text">
    <asp:TextBox runat="server" CssClass="text" ID="EmailTextBox"></asp:TextBox>
    <script>
        document.getElementById("ctl00_ContentPlaceHolder_EmailTextBox").type = "email";
    </script>
</label>
0
JimiSweden

Dans les anciennes versions de .NET, vous pouvez étendre la classe TextBox avec la possibilité de définir le type d'entrée: 

Une solution complètement basique - mais efficace - pourrait être celle présentée ci-dessous, qui ajoute également un espace réservé à la zone de texte. 

namespace Ux.Example{
    public class TextBox : System.Web.UI.WebControls.TextBox
    {
        public string PlaceHolder { get; set; }

        public string InputType { get; set; }

        protected override void OnInit(EventArgs e)
        {
            if (!string.IsNullOrWhiteSpace(PlaceHolder))
                Attributes.Add("placeholder", PlaceHolder);
            if (!string.IsNullOrWhiteSpace(InputType))
            {
                Attributes.Add("type", InputType);
            }
            base.OnLoad(e);
        }
    }
}

Vous devez également inclure le fichier dans le fichier aspx en utilisant @Register:

<%@ Register TagPrefix="ux" Namespace="Ux.Example" Assembly="CHANGE_TO_CORRECT_NAME" %>

Et l'utilisation réelle du contrôle serait alors: 

<ux:TextBox ID="Email" Visible="false" runat="server" PlaceHolder="enter e-mail address" InputType="email" />

Je n'ai pas testé ce qui se passe lorsque l'attribut TextMode est utilisé. Cela peut causer des dégâts.

0
faester