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"?
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>
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
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.
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" />
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>
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.