Erzwingen form von text-und Kleinschreibung

Wie könnte ich Sie zwingen, den text in das "Benutzername" text input niedriger zu sein-unabhängig davon, was der Benutzer eingibt?

<div class="register">
   <label for="username">Select username:</label>
</div> 
<div class="registerform">
    <input name="username" class="registerfont" type="text"
           id="username" maxlength="15" style="height:35px; width:300px">
</div>

Tun Sie etwas dagegen mit javascript
Sie Art müssen javascript verwendet.
Ich nehme an, Sie haben client-seitige code? Sie wirklich brauchen, es zu tun gibt. Es gibt auch text-transform: lowercase, aber das ist nur die Anzeige.
Wollen Sie es werden Kleinbuchstaben als Ihre Eingabe? oder willst du es abschicken alles in Kleinbuchstaben?

InformationsquelleAutor John | 2013-01-01

23

Sie haben, javascript zu verwenden. Ich habe ein Beispiel hier: http://jsfiddle.net/xCfdS/3/

HTML:
<input type="text" id="txt" onkeyup="return forceLower(this);"/>

Javascript:
```
function forceLower(strInput) 
{
strInput.value=strInput.value.toLowerCase();
}
```
Dies würde natürlich umgesetzt werden müssen auf dem server auch.
meinst du in der Datenbank?
irgendwo auf dem server, ob diese durchgesetzt werden, indem die Datenbank oder etwas anderes, ist bis zu Ihnen, aber verlassen Sie sich nicht ausschließlich auf client-side-scripting, da es leicht umgangen.
Dies ist wackelig. First off, gibt der Benutzer einen Großbuchstaben schreiben, und dann auf keyup es umgewandelt wird. Gut genug, Schätze ich, bis der Benutzer versucht, alle markieren und löschen. Es löscht nur den letzten Buchstaben. Viel zu wackelig für meinen Geschmack, und nicht für die Produktion würdig.
Vereinbart - persönlich bevorzuge ich die CSS-Lösung unten, und ist, wie ich dieses problem lösen. Entweder Art und Weise, die Sie überprüfen auf dem server, wenn Sie beabsichtigen, auf die Speicherung der transformierten Daten, so dass alle Ihre UI tut ist die Anzeige. CSS ist für die Anzeige.

InformationsquelleAutor jchapa
38

CSS:
```
form input[type="text"] {
    text-transform: lowercase;
}
```
sonst in der JS:
```
var text="this is my text.";
var lowercase=text.toLowerCase();
```
Das ist nur die Anzeige. Ich denke, wir können davon ausgehen, der OP will Wandel der Fall, auch nicht kurzzeitig ändern, wie es aussieht.
Dies ist eigentlich die beste Lösung, ästhetisch, vorausgesetzt, Sie kombinieren Sie es mit einer serverseitigen Umstellung auf "Absenden". Die akzeptierte Antwort wird flash Großbuchstaben kurz jedes mal, wenn der Benutzer eine Taste drückt.
Upvoting, weil die Validierung von Daten und "Ausbesserung" sollte auf der server-Seite nur. Sich einzig und allein auf js auswerten der Formular-Daten öffnet sich bis zu hacking. Zum Beispiel, deaktivieren Sie die js und man konnte ein Konto anlegen mit dem Benutzernamen 'Admin' (Hauptstadt Einer) und starten phishing anderen Nutzern. Auch die Bearbeitung eines form-Feldes, während es eingegeben wird, in die Probleme verursachen können mit den cursor-Platzierung in einigen Browsern oder asiatische Tastaturen, erfordern 1-3 Anschläge pro Charakter.
Die CSS-version ist besser als die javascript-version, solange Sie es auf das backend zu. Sonst js-Zeug ist wirklich wackelig. Siehe mein Kommentar oben, es bricht alles auswählen/löschen, und die transformation auf keyup ist schrill.
Die CSS-Lösung mit einem backend-Lösung sollte die beste sein " / " akzeptierte Antwort.

InformationsquelleAutor fdiv_bug
5

Können Sie etwas wie
```
<input autocapitalize="none" ></input>
```
und es sollte funktionieren in den neuesten Browsern
Für mehr details überprüfen Sie diese link

Das wird nicht funktionieren: autocapitalize="none" bedeutet nicht automatisch nutzen word/chars'. Es bedeutet nicht 'verbieten Sie die Verwendung von Großbuchstaben'.
Das ist super praktisch. Danke.
Das ist eigentlich genau das, was ich suchte - danke!!!

InformationsquelleAutor Miguel Carvajal

Mit jquery unter der Annahme, dass die input-ID ist Benutzername

$(document).ready(function(){
    $("#username").on('change keyup paste',function(){
    $(this).val($(this).val().toLowerCase());
     })
})

InformationsquelleAutor Ali Sheikhpour

Dies ist mein Vorschlag, es basiert auf die Antwort von @fdiv-bug & @ali-sheikhpour:

Hinzufügen text-transform: lowercase; für dieses Feld.

input[type="email"] {
    text-transform: lowercase;
}

fangen "change" - Ereignis auf diesem Gebiet und zu transformieren-Wert für den Kleinbuchstaben von (String)toLowerCase Funktion.

var upperCaseMatch = /[A-Z]/;
var events = {
    CHANGE: 'change'
};

$(function() {
    $(document).on('change', 'input[type="email"]', function() {
        var value = $(this).val();
        if (!upperCaseMatch.test(value)) {
            return;
        }
        $(this).val(value.toLowerCase());
    });
});

Hoffe, Ihr nützlich für Sie.

Super Antwort! Arbeitete für mich perfekt!

InformationsquelleAutor nguyenlamzx

0

@fdiv_bug s Antwort ist gut, außer für die genannten Themen in die Kommentare Ihre Antwort. Mit Hilfe der input-Ereignis anstelle von das keyup-Ereignis behoben, diese Probleme für mich.

HTML:
```
<input oninput="this.value=this.value.toLowerCase()"/>
```
Javascript:
```
element.addEventListener('input',function(){this.value=this.value.toLowerCase()});
```
InformationsquelleAutor JJJ

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.