Я хочу преобразовать символы нижнего регистра в верхний регистр, поскольку пользовательские типы используют javascript. Любые предложения приветствуются.
Я пробовал следующее:
$("#textbox").live('keypress', function (e) {
if (e.which >= 97 && e.which <= 122) {
var newKey = e.which - 32;
// I have tried setting those
e.keyCode = newKey;
e.charCode = newKey;
}
});
$("#textbox").bind('keyup', function (e) {
if (e.which >= 97 && e.which <= 122) {
var newKey = e.which - 32;
// I have tried setting those
e.keyCode = newKey;
e.charCode = newKey;
}
$("#textbox").val(($("#textbox").val()).toUpperCase());
});
css
#textbox{text-transform:uppercase}
Это может быть приятным обходным решением. Просто установите это в свой CSS:
input#textbox {
text-transform: uppercase;
}
Если вы разместите данные на стороне сервера script (скажем, php), вы всегда можете сделать что-то вроде этого:
$upper_data = strtoupper($_POST['textbox']);
Привет, этот код отлично работает на входе и текстовом поле без задержки или изменения капитализации
$("#input").on('input', function(evt) {
var input = $(this);
var start = input[0].selectionStart;
$(this).val(function (_, val) {
return val.toUpperCase();
});
input[0].selectionStart = input[0].selectionEnd = start;
});
смешайте fooobar.com/questions/146229/... и fooobar.com/questions/146231/...
попробуйте этот css script, он работает для меня.
<style>
input{text-transform:uppercase};
</style>
для информации, то, что вы видите, может быть, в верхнем регистре, но на самом деле это то, что вы набираете, например, если вы набираете "Тест", который он показывает как "ТЕСТ", но когда ваш get val() отображается как "Тест".
если вы хотите сделать его верхним регистром для реального, тогда добавьте ниже script ниже на событие, такое как размытие объекта или уступка по мере необходимости.
$(это).val($ (это).val() toUpperCase().);
И если вы хотите использовать для определенного объекта, добавьте дополнительный script, как то, что я использовал к настоящему времени
input[attr]{
text-transform:uppercase;
}
input[attr='value']{
text-transform:uppercase;
}
Поскольку вы отметили это как вопрос jQuery, вот простое (ну, довольно простое) решение jQuery:
$('#text_statute_section').on('keypress', function(event) {
if(null !== String.fromCharCode(event.which).match(/[a-z]/g)) {
event.preventDefault();
$(this).val($(this).val() + String.fromCharCode(event.which).toUpperCase());
}
});
Использование keypress предотвращает эффект "отскока", который имеет keyup (keydown также делает, но event.which не различает непосредственно между верхним и нижним регистром здесь - проверка ключа переключения грязна из-за блокировки крышки). Кроме того, это работает на входном символе, преобразует его в верхний регистр, а затем добавляет его к существующему значению, а не сначала добавляет, а затем преобразует всю вещь в верхний регистр, как и большинство других решений, которые я видел. Наконец, он фактически преобразует характер, а не применяет к нему стиль форматирования, как это делает CSS. Все это дает лучший контроль, особенно в ситуациях, когда некоторые символы должны быть вынуждены заглавными, а некоторые нет, например, в серийных номерах или т.д.
EDIT: (четыре года спустя)!
Я никогда не был доволен тем, как jQuery/javascript обрабатывает смену ключей в верхнем регистре, когда они набираются. Я был над всеми предложениями в этом посте, и ни один из них (в первую очередь мой) не работает безупречно, Это раздражает меня, поскольку в старые дни VB6 было просто изменить характер KeyAscii, который был передан событию KeyPress. Во всяком случае, совершенно случайно, я нашел своеобразное "черное искусство", которое работает безупречно, насколько я его тестировал. Это означает, что он работает в Chrome, он правильно обрабатывает любую позицию курсора в тексте, он (с некоторой работой) не изменяет поведение браузера в фокусе, и он надежно изменяется на верхний регистр без какого-либо дрожащего отображения в нижнем регистре. В то время как решение CSS также выполняет все это, как наблюдали другие, у него есть недостаток в том, что необходимо программно заставлять базовые символы заглавными, если вам нужна фактическая строка для работы, что может быть затруднительным для отслеживания и, следовательно, Хорошо. Итак, я думал, что могу написать это, на случай, если кто-то сочтет это полезным.
Это решение действительно зависит от Джоша Буша (180 строк кода, для тех, кто обеспокоен зависанием зависимостей) Masked Input Plugin от digitalbush, который является твердым камнем и делает то, что он делает очень хорошо. Если вы измените event.which на другое значение и затем вызовите метод mask() (сначала укажите обработчик нажатия и вторую в своем коде), это будет сохраняться.
Здесь немного кода:
$.mask.definitions['b'] = '[A-Z, ]';
$('#txtMyInput').on('keypress', function(e) {
e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })
Маска не поддерживает очень много типов масок изначально: это литералы, альфа, числовые и буквенно-цифровые. Если вы хотите использовать знаки препинания или что-то еще, что вам нужно сделать самостоятельно, используйте регулярное выражение. (Если вы это сделаете, вам нужно иметь в виду, что одно и то же совпадение регулярных выражений применяется к каждому персонажу за раз, без учета других символов, так что вы не можете ничего сделать). В моем конкретном случае мне нужны были все кепки, плюс пробелы и запятые. ? в строке маски означает, что следующие символы являются необязательными, поэтому это дает мне до 20 символов. Поскольку мне не нужна была какая-либо маска для отображения, я использовал пустую строку для заполнителя.
Все работает отлично, за исключением одной маленькой проблемы: если вы хотите сохранить способ, которым браузер выбирает текст при вставке в поле, вам нужно выполнить дополнительную работу. Я заработал, чтобы взломать код маски, чтобы получить то, что я хотел.
Сначала я попробовал просто выбрать текст в обработчике событий фокуса, который обычно работает, когда я вызываю focus() из обработчика keydown. Здесь это не сработало; курсор только что был установлен в конец текста, как если бы он щелкнул мышью. Я попытался сменить местозаполнитель на пробел. Это привело к заполнению текста достаточным количеством пробелов, чтобы заполнить указанный предел и выбрать все.
Я пробовал некоторые из методов здесь, но лучшие из них (то есть тот, который действительно работал в этом случае) по-прежнему не применяют выделение до тех пор, пока ключ что означает, что есть время, когда это происходит, и это не происходит вообще, если вы держите клавишу до тех пор, пока она не повторится и не исчезнет, когда фокус находится в ящике.
Итак, я вкопался в код маски. Как оказалось, в плагине также есть обработчик фокуса, который он использует для настройки индикатора маски (например, (___) ___-___-____ для телефона) в поле, когда вы фокусируетесь на нем. Это поведение вы хотите большую часть времени, но не здесь, потому что оно заменяет выделенный текст выделенным текстом, конкатенированным на ту часть индикатора маски, которая еще не заполнена. Когда у вас нет индикатора маски, это приводит к отмене выбора текста в поле, как если бы вы программно назначили текстовое значение поля.
Я решил немного взломать код маски. Сначала я попробовал комментировать весь обработчик события фокуса, который не отображал маску ввода в других полях, где я этого хотел. Итак, я нашел менее инвазивную альтернативу. Я изменил это (в настоящее время jquery.maskedinput.js, строка 164):
}).on("focus.mask", function() {
if (!input.prop("readonly") {
// etc.
:
}).on("focus.mask", function() {
if (!input.prop("readonly") && settings.placeholder.length > 0) {
Это обходит настройку индикатора маски, если вы установили свой заполнитель в пустую строку, что позволяет выполнять поведение нативного фокуса браузера.
Еще одна вещь: если вы используете метод focus() для фокусировки на текстовом поле (например, чтобы спасти пользователя ввода данных от тенденции браузера к блужданию по неизвестным частям при использовании клавиши табуляции), вы 'll нужно вызвать метод select() в обработчике события фокуса, чтобы правильно выделить текст (keybdFocus - это флаг, который я устанавливал, когда я вызываю событие focus() из обработчика keydown, чтобы отличить от фокус мыши):
$('#txtMyInput').on('keypress', function(e) {
e.which = String.fromCharCode(e.which).toUpperCase().charCodeAt(0);
})
.mask('b?bbbbbbbbbbbbbbbbbbb', { placeholder: '' })
.focus(function() {
if (kybdFocus) {
kybdFocus = false;
$(this).select();
}
});
Подведение итогов:
mask() в вашем коде. Маска оценивает e.which, чтобы определить, подходит ли символ-кандидат маске, и, по-видимому, обработчик и код маски запускаются в порядок, в котором они указаны.)'' при вызове метода mask().select() в обработчике события фокуса.Конечно, если вы просто хотите, чтобы символы были заглавными в контексте типичного окна редактирования в масках, вы можете опустить шаги 2 и 4. Это как я попал в это в первую очередь.
function changeToUpperCase(event,obj) {
charValue = (document.all) ? event.keyCode : event.which;
if (charValue!="8" && charValue!="0" && charValue != "27"){
obj.value += String.fromCharCode(charValue).toUpperCase();
return false;
}else{
return true;
}
}
<input id="txtId" type="text" onkeypress="return changeToUpperCase(event,this)" />
Edit:
Самый простой способ - использовать css:
#txtId {text-transform:uppercase}
$(document).ready(function () {
$("#textbox").keyup( function (e) {
var str = $(this).val();
$("#textbox").val(str.toUpperCase());
});
});
Это решение, с которым я столкнулся, что также позволяет избежать проблем с заменой заполнителей на верхний регистр и не вмешивается в позицию курсора.
Внимание: не меняет "значение" поля, а только дисплей. Для этого см. Здесь Обновление значения ввода без потери позиции курсора
$(function() {
$("[data-uppercase='1']").on('keypress', function (e) {
var $this = $(this);
var placeholder = $this.attr('placeholder');
if(placeholder && placeholder.length > 0) {
this["_placeholder"] = placeholder;
$this.attr('placeholder', '');
}
$this.css('text-transform', 'uppercase');
}).on('keyup blur', function () {
var $this = $(this);
if ($this.val().length < 1) {
$this.css("text-transform", "");
$this.attr("placeholder", this["_placeholder"]);
this["_placeholder"] = undefined;
}
});
});
Затем добавьте атрибут верхнего регистра данных в элемент HTML:
<input type="text" data-uppercase="1" />
Работает в Chrome, Firefox и IE9 +.
Я знаю, что опаздываю на вечеринку, но я бы хотел предложить следующее:
(function ( $ ) {
var displayUppercase = function ($element) {
if ($element.val()) {
$element.css('text-transform', 'uppercase');
} else {
$element.css('text-transform', 'none');
}
};
$.fn.displayAsUppercase = function() {
$(this).each(function() {
var $element = $(this);
displayUppercase($element);
$element.on('input', function(){displayUppercase($element)});
});
return this;
};
}( jQuery ));
Он имеет следующие преимущества:
JS Fiddle здесь
Хотя подход CSS + Server Side UCase, вероятно, "наилучший", вот решение jQuery на стороне клиента, которое я использую, когда возникает необходимость:
$("#id").keyup(function() {
$(this).val($(this).val().replace(/([a-z])/,function(s){return s.toUpperCase()}));
});
Она некрасивая, но она выполнит свою работу!
$("#id").keyup(function() {
$(this).val($(this).val().replace(/([a-z])/,function(){
return $("#id").toUpperCase();
}));
});
небольшая коррекция в приведенном выше script теперь будет работать отлично.