Ändern Sie die Eingabe in Großbuchstaben

JS:

<script type="text/css">
$(function() {
    $('#upper').keyup(function() {
        this.value = this.value.toUpperCase();
    });
});
</script>

HTML

<div id="search">
        <input type="radio" name="table" class="table" value="professor" tabindex="1" /> Professor
        <input type="radio" name="table" class="table" value="department" tabindex="2" /> Department
        <input type="radio" name="table" id="upper" class="table" value="course" tabindex="3" /> Course
        <input type="text" name="search" class="keywords" value="Select an option..." onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?':this.value;" tabindex="4"  />
        <div id="content"> </div>
    </div>

Warum funktioniert das immer noch nicht? Ich versuche nur, div ".keywords" von JS aufzurufen.

Ich denke, der eleganteste Weg ist ohne Javascript, aber mit CSS. Sie können verwenden text-transform: uppercase(dies ist nur für die Idee inline):

<input id="yourid" style="text-transform: uppercase" type="text" />

Bearbeiten:

Wenn Sie also in Ihrem Fall möchten, dass Schlüsselwörter in Großbuchstaben geschrieben werden, ändern Sie: keywords: $(".keywords").val(),in$(".keywords").val().toUpperCase(),

Javascript-String-Objekte haben eine toLocaleUpperCase()Funktion, die die Konvertierung selbst vereinfacht.

Hier ist ein Beispiel für die Live-Großschreibung:

$(function() {
    $('input').keyup(function() {
        this.value = this.value.toLocaleUpperCase();
    });
});

Leider wird dadurch der Inhalt des Textfelds vollständig zurückgesetzt, sodass die Caret-Position des Benutzers (wenn nicht "das Ende des Textfelds") verloren geht.

Sie können dies jedoch mit etwas Magie des Browserwechsels wieder einhacken:

// Thanks http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
function getCaretPosition(ctrl) {
    var CaretPos = 0;    // IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
        CaretPos = ctrl.selectionStart;
    }

    return CaretPos;
}

function setCaretPosition(ctrl, pos) {
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}


// The real work

$(function() {
    $('input').keyup(function() {
        // Remember original caret position
        var caretPosition = getCaretPosition(this);

        // Uppercase-ize contents
        this.value = this.value.toLocaleUpperCase();

        // Reset caret position
        // (we ignore selection length, as typing deselects anyway)
        setCaretPosition(this, caretPosition);
    });
});

Letztendlich könnte es am einfachsten sein, es zu fälschen. Stellen Sie den Stil text-transform: uppercasefür das Textfeld so ein, dass er dem Benutzer in Großbuchstaben angezeigt wird. Wenden Sie dann in Ihrem Javascript die Textumwandlung einmal an, wenn der Caret-Fokus des Benutzers das Textfeld vollständig verlässt:

HTML:

<input type="text" name="keywords" class="uppercase" />

CSS:

input.uppercase { text-transform: uppercase; }

Javascript:

$(function() {
    $('input').focusout(function() {
        // Uppercase-ize contents
        this.value = this.value.toLocaleUpperCase();
    });
});

Hoffe das hilft.

Wenn Sie es für eine HTML-Eingabe verwenden , können Sie dies problemlos ohne die Verwendung von JavaScript tun! oder andere JS-Bibliotheken. Es wäre Standard und sehr einfach, eine CSS-Tag -Texttransformation zu verwenden :

<input type="text" style="text-transform: uppercase" >

oder Sie können eine Bootstrap-Klasse mit dem Namen "Text-Großbuchstaben" verwenden.

<input type="text" class="text-uppercase" >

Auf diese Weise ist Ihr Code viel einfacher!

Lösungen, die value.toUpperCase verwenden, scheinen das Problem zu haben, dass durch Eingabe von Text in das Feld die Cursorposition auf das Ende des Texts zurückgesetzt wird. Lösungen, die Texttransformation verwenden, scheinen das Problem zu haben, dass der an den Server gesendete Text möglicherweise immer noch in Kleinbuchstaben geschrieben ist. Diese Lösung vermeidet diese Probleme:

function handleInput(e) {
   var ss = e.target.selectionStart;
   var se = e.target.selectionEnd;
   e.target.value = e.target.value.toUpperCase();
   e.target.selectionStart = ss;
   e.target.selectionEnd = se;
}

<input type="text" id="txtTest" oninput="handleInput(event)" />

Kann es auch so machen, aber andere Wege scheinen besser zu sein. Dies ist praktisch, wenn Sie es nur einmal brauchen.

onkeyup="this.value = this.value.toUpperCase();"

Versuchen:

$('#search input.keywords').bind('change', function(){
    //this.value.toUpperCase();
    //EDIT: As  Mike Samuel suggested, this will be more appropriate for the job
    this.value = this.value.toLocaleUpperCase();
} );

Ich konnte den Text-Großbuchstaben in Bootstrap, auf den in einer der Antworten verwiesen wird, nicht finden. Egal, ich habe es geschaffen;

.text-uppercase {
  text-transform: uppercase;
}

Dadurch wird Text in Großbuchstaben angezeigt, die zugrunde liegenden Daten werden jedoch nicht auf diese Weise transformiert. Also in jquery habe ich;

$(".text-uppercase").keyup(function () {
    this.value = this.value.toLocaleUpperCase();
});

Dadurch werden die zugrunde liegenden Daten überall dort geändert, wo Sie die Text-Großbuchstaben-Klasse verwenden.

onBlur="javascript:{this.value = this.value.toUpperCase(); }

wird leicht in Großbuchstaben geändert.

Demo hier

Ich denke, der einfachste Weg ist die Verwendung der Bootstrap-Klasse ".text-Großbuchstaben".

<input type="text" class="text-uppercase" />

Diese Antwort hat ein Problem:

style="text-transform: uppercase"

Außerdem wird das Platzhalterwort in Großbuchstaben umgewandelt, was unpraktisch ist

placeholder="first name"

Beim Rendern der Eingabe wird der Platzhalter "Vorname" in Großbuchstaben geschrieben

FIRST NAME

Also habe ich etwas Besseres geschrieben:

onkeypress="this.value = this.value + event.key.toUpperCase(); return false;"

es funktioniert gut!, aber es hat einige Nebenwirkungen, wenn Ihr Javascript-Code komplex ist,

Ich hoffe, es hilft jemandem, ihm eine Idee zu geben, um eine bessere Lösung zu entwickeln.

Hier verwenden wir das Ereignis onkeyup im Eingabefeld, das ausgelöst wird, wenn der Benutzer einen Schlüssel freigibt. Und hier ändern wir unseren Wert durch die Funktion toUpperCase () in Großbuchstaben .

Beachten Sie, dass text-transform = "Großbuchstaben" nur den Text im Stil ändert. aber nicht der Wert. Um den Wert zu ändern, verwenden Sie diesen Inline-Code, der den Wert anzeigt und ändert

<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">

Hier ist das Code-Snippet, das bewiesen hat, dass der Wert geändert wurde

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form method="get" action="">
		<input id="test-input" type="" name="" onkeyup="this.value = this.value.toUpperCase();">
		<input type="button" name="" value="Submit" onclick="checking()">
	</form>
	<script type="text/javascript">
		function checking(argument) {
			// body...
			var x = document.getElementById("test-input").value
			alert(x);
		}
		
		
	</script>
</body>
</html>

<input id="name" data-upper type="text"/>
<input id="middle" data-upper type="text"/>
<input id="sur" data-upper type="text"/>

Oben den Text eines dynamisch erstellten Elements mit dem oberen Attribut und wenn eine Keyup-Aktion ausgeführt wird

$(document.body).on('keyup', '[data-upper]', function toUpper() {
  this.value = this.value.toUpperCase();
});

**JAVA SCRIPT**
<html>
<body>
<script>
function @ToCaps(obj)
{
obj.value=obj.value.toUpperCase();
}
</script>
<input type="text" onkeyup=@ToCaps(this)"/>
</body>
</html>

**ASP.NET**
Use a css style on the text box, write css like this:

.ToCaps {Texttransformation: Großbuchstaben; }}

<asp:TextBox ID="TextBox1" runat="server" CssClass="ToCaps"></asp:Te writxtBox>

**OR**
simply write this code in textbox
<asp:TextBox ID="TextBox1" runat="server" style="text-transform:uppercase"></asp:TextBox>


 **1.Note you don't get intelligence until you type up to style="**  

Javascript hat eine toUpperCase()Methode. http://www.w3schools.com/jsref/jsref_toUpperCase.asp

Wo immer Sie es für am besten halten, um es in Ihren Code aufzunehmen, müssten Sie so etwas tun

$(".keywords").val().toUpperCase()

Sie können diesen HTML-Code ausprobieren

<input id="pan" onkeyup="inUpper()" />

JavaScript

function _( x ) {
  return document.getElementById( x );
}
  // convert text in upper case
  function inUpper() {
    _('pan').value = _('pan').value.toUpperCase();
  }