Изменить ввод в верхний регистр

Ответ 1

Я думаю, что самый изящный способ - без javascript, но с css. Вы можете использовать text-transform: uppercase (это просто для идеи):

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

Edit:

Итак, в вашем случае, если вы хотите, чтобы ключевые слова были заглавными: keywords: $(".keywords").val(), до $(".keywords").val().toUpperCase(),

Ответ 2

Объекты строки Javascript имеют функцию toLocaleUpperCase(), которая упрощает преобразование.

Вот пример живой капитализации:

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

К сожалению, это полностью сбрасывает содержимое текстового поля, поэтому пользовательская позиция каретки (если не "конец текстового поля" ) теряется.

Вы можете взломать это обратно в, хотя, с помощью магии переключения браузера:

// 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);
    });
});

В конечном счете, это может быть проще всего подделать. Задайте стиль text-transform: uppercase в текстовом поле, чтобы он отображался в верхнем регистре для пользователя, а затем в вашем Javascript применяйте текстовое преобразование один раз, когда пользовательский фокус внимания полностью покидает текстовое поле:

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();
    });
});

Надеюсь, что это поможет.

Ответ 3

Также можно сделать это, но другие способы кажутся лучше, это пригодится, если вам нужно только один раз.

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

Ответ 4

попробовать:

$('#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();
} );

Ответ 5

Если вы предназначаете для ввода html, вы можете легко сделать это без использования javascript. Это было бы стандартным и очень простым в использовании современным тегом CSS:

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

или вы можете использовать класс начальной загрузки с именем "text-uppercase"

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

Ответ 6

Решения, использующие value.toUpperCase, похоже, имеют проблему с тем, что ввод текста в поле сбрасывает позицию курсора в конец текста. Решения, использующие текстовое преобразование, похоже, имеют проблему, что текст, представленный на сервере, по-прежнему потенциально строчный. Это решение позволяет избежать этих проблем:

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)" />

Ответ 7

Я не мог найти текст в верхнем регистре в Bootstrap, упомянутом в одном из ответов. Неважно, я создал его;

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

Отображает текст в верхнем регистре, но базовые данные не преобразуются таким образом. Поэтому в jquery у меня есть:

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

Это изменит базовые данные везде, где вы используете класс text-uppercase.

Ответ 8

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

легко изменит прописную букву.

Демо здесь

Ответ 9

Этот ответ имеет проблему:

style="text-transform: uppercase"

это также преобразовывает слово заполнителя в верхний регистр, что неудобно

placeholder="first name"

при рендеринге ввода записывает заполнитель "имя" в верхнем регистре

FIRST NAME

поэтому я написал что-то лучше:

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

это работает хорошо !, но у него есть некоторые побочные эффекты, если ваш код JavaScript сложный,

надеюсь, что это поможет кому-то дать ему/ей идею разработать лучшее решение.

Ответ 10

Javascript имеет метод toUpperCase(). http://www.w3schools.com/jsref/jsref_toUpperCase.asp

Поэтому, где бы вы ни думали, лучше всего поместить его в свой код, вам нужно будет сделать что-то вроде

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

Ответ 11

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

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

.ToCaps {text-transform: uppercase; }

<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="**  

Ответ 12

Вы можете попробовать этот HTML

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

Java-script

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

Ответ 13

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

Верхний текст на динамически созданном элементе, который имеет атрибут верхний, и когда происходит действие keyup

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

Ответ 14

Здесь мы используем событие onkeyup в поле ввода, которое срабатывает, когда пользователь отпускает ключ. И здесь мы меняем наше значение в верхний регистр с помощью функции toUpperCase().

Обратите внимание, что text-transform = "Uppercase" изменит только текст по стилю. но не это значение. Итак, чтобы изменить значение, используйте этот встроенный код, который будет отображать, а также изменять значение

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

Вот фрагмент кода, который подтвердил значение изменения

<!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>