С помощью jQuery, как мне сделать заглавной первую букву текстового поля, пока пользователь все еще редактирует это поле?

Question

Я ищу пример того, как сделать заглавной первую букву строки, вводимой в текстовое поле. Обычно это делается для всего поля с помощью функции, регулярного выражения, OnBlur, OnChange и т. Д. Я хочу использовать заглавные буквы, пока пользователь печатает все еще .

Например, если я набираю слово «кошка», пользователь должен нажать «c», а затем, когда он нажмет «a», буква C должна быть написана заглавными буквами в поле.

Я думаю, что то, для чего я иду, возможно с keyup или keypress, но я не уверен, с чего начать.

У кого-нибудь есть пример для меня?

Answer 1

Просто используйте CSS.

.myclass 
{
    text-transform:capitalize;
}

Answer 2

Это просто изменит вашу первую букву текста:

yourtext.substr(0,1).toUpperCase()+yourtext.substr(1);

Answer 3

Я ответил на это где-то еще. Тем не менее, вот две функции, которые вы можете вызвать событие keyup.

Прописать первое слово

  function ucfirst(str,force){
          str=force ? str.toLowerCase() : str;
          return str.replace(/(\b)([a-zA-Z])/,
                   function(firstLetter){
                      return   firstLetter.toUpperCase();
                   });
     }

И с заглавной буквы все слова

function ucwords(str,force){
  str=force ? str.toLowerCase() : str;  
  return str.replace(/(\b)([a-zA-Z])/g,
           function(firstLetter){
              return   firstLetter.toUpperCase();
           });
}

Как @Darrell предложил

$('input[type="text"]').keyup(function(evt){

      // force: true to lower case all letter except first
      var cp_value= ucfirst($(this).val(),true) ;

      // to capitalize all words  
      //var cp_value= ucwords($(this).val(),true) ;


      $(this).val(cp_value );

   });

Надеюсь, это полезно

Приветствия:)

Answer 4

$('input[type="text"]').keyup(function(evt){
    var txt = $(this).val();


    // Regex taken from php.js (http://phpjs.org/functions/ucwords:569)
    $(this).val(txt.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase( ); }));
});

Answer 5

CSS решение с "text-transform: capitalize;" бесполезно, если вы хотите использовать содержимое ввода в бэкэнде. Вы все равно будете получать данные как есть. JavaScript решает эту проблему.

Плагин JQuery, объединенный с некоторыми из техник, упомянутых ранее, плюс заглавные слова после дефисов, т. Е. "Tro Lo-Lo":

Добавить к вашему сценарию:

jQuery.fn.capitalize = function() {
    $(this[0]).keyup(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var stringStart = box.selectionStart;
        var stringEnd = box.selectionEnd;
        $(this).val(txt.replace(/^(.)|(\s|\-)(.)/g, function($word) {
            return $word.toUpperCase();
        }));
        box.setSelectionRange(stringStart , stringEnd);
    });

   return this;
}

Затем просто присоедините заглавные буквы () к любому селектору:

$('#myform input').capitalize();

Answer 6

Я использовал код @Spajus и написал более расширенный плагин jQuery.

Я написал эти четыре функции jQuery:

• upperFirstAll() для заглавных букв ВСЕХ слов в поле ввода
• upperFirst(), чтобы использовать только ПЕРВОЕ слово
• upperCase() для преобразования текста отверстия в верхний регистр
• lowerCase() для преобразования текста отверстия в нижний регистр

Вы можете использовать и связывать их как любую другую функцию jQuery:
$('#firstname').upperFirstAll()

Мой полный плагин jQuery:

(function ($) {
    $.fn.extend({

    // With every keystroke capitalize first letter of ALL words in the text
    upperFirstAll: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)(.)/g,
            function(c) {
                return c.toUpperCase();
            }));
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // With every keystroke capitalize first letter of the FIRST word in the text
    upperFirst: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase().replace(/^(.)/g,
            function(c) {
                return c.toUpperCase();
            }));
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // Converts with every keystroke the hole text to lowercase
    lowerCase: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toLowerCase());
            box.setSelectionRange(start, end);
        });
        return this;
    },

    // Converts with every keystroke the hole text to uppercase
    upperCase: function() {
        $(this).keyup(function(event) {
            var box = event.target;
            var txt = $(this).val();
            var start = box.selectionStart;
            var end = box.selectionEnd;

            $(this).val(txt.toUpperCase());
            box.setSelectionRange(start, end);
        });
        return this;
    }

    });
}(jQuery));

Groetjes:)

Answer 7

Мой личный фаворит при использовании jQuery короток и сладок:

function capitalize(word) {
   return $.camelCase("-" + word);
}

Есть плагин jQuery, который делает это тоже. Я назову это ... jCap.js

$.fn.extend($, { 
    capitalize: function() {
        return $.camelCase("-"+arguments[0]); 
    } 
});

Answer 8

 $("#test").keyup(
     function () {
         this.value = this.value.substr(0, 1).toUpperCase() + this.value.substr(1).toLowerCase();
     }
 );

Answer 9

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

(оба используют синтаксис Jquery)

    function CapitaliseFirstLetter(elemId) {
        var txt = $("#" + elemId).val().toLowerCase();
        $("#" + elemId).val(txt.replace(/^(.)|\s(.)/g, function($1) {
        return $1.toUpperCase(); }));
        }

Кроме того, функция для заглавных букв ВСЕЙ строки:

    function CapitaliseAllText(elemId) {
         var txt = $("#" + elemId).val();
         $("#" + elemId).val(txt.toUpperCase());
         }

Синтаксис для использования в событии щелчка текстового поля:

    onClick="CapitaliseFirstLetter('myTextboxId'); return false"

Answer 10

Мои извинения. Синтаксис был отключен из-за того, что я спешил и неаккуратен. Вот, пожалуйста ...

     $('#tester').live("keyup", function (evt)
        {
            var txt = $(this).val();
            txt = txt.substring(0, 1).toUpperCase() + txt.substring(1);
            $(this).val(txt);
        });

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

Надеюсь, это поможет. Удачного кодирования! :)