Как я могу принудительно ввести ввод в верхнем регистре в текстовом поле ASP.NET? - PullRequest
Новая
       37

Как я могу принудительно ввести ввод в верхнем регистре в текстовом поле ASP.NET?

31 голосов
/ 14 октября 2008

Я пишу приложение ASP.NET. У меня есть текстовое поле на веб-форме, и я хочу, чтобы все, что пользователь вводит в верхнем регистре. Я хотел бы сделать это на переднем конце. Следует также отметить, что в этом текстовом поле есть элемент управления проверкой, поэтому я хочу убедиться, что решение не мешает проверке ASP.NET.

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

Ответы [ 20 ]

51 голосов
/ 14 октября 2008

Почему бы не использовать комбинацию CSS и бэкэнда? Использование: 

style='text-transform:uppercase'

в TextBox, и в вашем коде используйте: 

Textbox.Value.ToUpper();

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

22 голосов
/ 14 октября 2008

Используйте стиль CSS для текстового поля. Ваш CSS должен быть примерно таким: 

.uppercase
{
    text-transform: uppercase;
}

<asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>;
9 голосов
/ 31 августа 2011

Хорошо, после тестирования вот лучшее, более чистое решение. 

$('#FirstName').bind('keyup', function () {

    // Get the current value of the contents within the text box
    var val = $('#FirstName').val().toUpperCase();

    // Reset the current value to the Upper Case Value
    $('#FirstName').val(val);

});
7 голосов
/ 11 января 2010 
**I would do like:
<asp:TextBox ID="txtName" onkeyup="this.value=this.value.toUpperCase()" runat="server"></asp:TextBox>**
6 голосов
/ 15 октября 2008

Вы можете перехватывать события нажатия клавиш, отменять строчные и добавлять их прописные версии к вводу: 

window.onload = function () {
    var input = document.getElementById("test");

    input.onkeypress = function () {
        // So that things work both on Firefox and Internet Explorer.
        var evt = arguments[0] || event;
        var char = String.fromCharCode(evt.which || evt.keyCode);

        // Is it a lowercase character?
        if (/[a-z]/.test(char)) {
            // Append its uppercase version
            input.value += char.toUpperCase();

            // Cancel the original event
            evt.cancelBubble = true;
            return false;
        }
    }
};

Это работает как в Firefox, так и в Internet Explorer. Вы можете увидеть это в действии здесь .

3 голосов
/ 27 августа 2009 
<!-- Script by hscripts.com -->
<script language=javascript>
    function upper(ustr)
    {
        var str=ustr.value;
        ustr.value=str.toUpperCase();
    }

    function lower(ustr)
    {
        var str=ustr.value;
        ustr.value=str.toLowerCase();
    }
</script>

<form>
    Type Lower-case Letters<textarea name="address" onkeyup="upper(this)"></textarea>
</form>

<form>
    Type Upper-case Letters<textarea name="address" onkeyup="lower(this)"></textarea>
</form>
2 голосов
/ 14 октября 2008

Я только что сделал что-то подобное сегодня. Вот модифицированная версия: 

<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
<script type="text/javascript">
    function setFormat() {
        var inp = document.getElementById('ctl00_MainContent_txtInput');
        var x = inp.value;
        inp.value = x.toUpperCase();
    }

    var inp = document.getElementById('ctl00_MainContent_txtInput');
    inp.onblur = function(evt) {
        setFormat();
    };
</script>

По сути, скрипт добавляет событие, которое срабатывает, когда текстовое поле теряет фокус.

2 голосов
/ 14 октября 2008 
 style='text-transform:uppercase'
2 голосов
/ 22 июня 2016

преобразование текста CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase

CssClass

Свойство WebControl.CssClass

Вы можете узнать больше об этом - https://developer.mozilla.org/en/docs/Web/CSS/text-transform

https://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.webcontrol.cssclass(v=vs.110).aspx

использовать Style="text-transform: uppercase;" или CssClass="upper"

2 голосов
/ 17 декабря 2010

Я провел некоторый анализ по этой проблеме в четырех популярных версиях браузера.

  1. тег style просто отображает символы в верхнем регистре, но значение элемента управления остается строчным
  2. Функциональность нажатия клавиш с использованием кода, отображенного выше, немного беспокоит, так как в Firefox Chrome и Safari она отключает функцию для Ctrl + V в элементе управления.
  3. другая проблема с использованием уровня символов в верхнем регистре также не переводит всю строку в верхний регистр.

  4. ответ, который я нашел, состоит в том, чтобы реализовать это в keyup вместе с тегом style. 

    <-- form name="frmTest" -->
<-- input type="text" size=100 class="ucasetext" name="textBoxUCase" id="textBoxUCase" -->
<-- /form -->

window.onload = function() {
    var input = document.frmTest.textBoxUCase;
    input.onkeyup = function() {
        input.value = input.value.toUpperCase();
    }
};
Страница:
...