Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

.myclass 
{
    text-transform:capitalize;
}

Ответ 2

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

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

Ответ 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();
           });
}

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

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

   });

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

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

Ответ 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( ); }));
});

Ответ 5

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

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

Добавьте к своему script:

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

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

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

Ответ 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:)

Ответ 7

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

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

Там тоже есть плагин jQuery. Я назову это... jCap.js

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

Ответ 8

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

Ответ 9

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

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

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

Кроме того, функция "Заглавная строка" WHOLE:

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

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

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

Ответ 10

Мои пристрастия. Синтаксис был отключен из-за того, что я спешил и неряшлив. Здесь вы идете...

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

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

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

Ответ 11

Это очень здорово, что вы можете использовать только первую букву поля ввода. С этим. Если кто-нибудь знает, как заглавные буквы. Как CSS text-transform: capize, Please Reply.. Здесь вы идете..

$('input-field').keyup(function(event) { $(this).val(($(this).val().substr(0,1).toUpperCase())+($(this).val().substr(1))); });

Ответ 12

Турецкий. Если кому-то все еще интересно.

 $('input[type="text"]').keyup(function() {
    $(this).val($(this).val().replace(/^([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])|\s+([a-zA-Z\s\ö\ç\ş\ı\i\ğ\ü\Ö\Ç\Ş\İ\Ğ\Ü])/g, function ($1) {
        if ($1 == "i")
            return "İ";
        else if ($1 == " i")
            return " İ";
        return $1.toUpperCase();
    }));
});

Ответ 13

это поможет вам преобразовать первую букву каждого слова в верхний регистр.

<script>
  /* convert First Letter UpperCase */
  $('#txtField').on('keyup', function (e) {
    var txt = $(this).val();
    $(this).val(txt.replace(/^(.)|\s(.)/g, function ($1) {
      return $1.toUpperCase( );
    }));
  });
</script>

Пример: это предложение для случая с заголовком → This Is A Name Case Sentence

Ответ 14

Решение, принимающее исключения (переданные параметрами):

Скопируйте приведенный ниже код и используйте его следующим образом: $('myselector'). maskOwnName (['of', 'on', 'a', 'as', 'at', 'for', 'in', 'to']);

(function($) {
    $.fn.teste = function(not_capitalize) {
            not_capitalize = !(not_capitalize instanceof Array)? []: not_capitalize;

        $(this).keypress(function(e){
            if(e.altKey || e.ctrlKey)
                return;

            var new_char = String.fromCharCode(e.which).toLowerCase();

            if(/[a-zà-ú\.\, ]/.test(new_char) || e.keyCode == 8){
                var start = this.selectionStart,
                    end = this.selectionEnd;

                if(e.keyCode == 8){
                    if(start == end)
                        start--;

                    new_char = '';
                }

                var new_value = [this.value.slice(0, start), new_char, this.value.slice(end)].join('');
                var maxlength = this.getAttribute('maxlength');
                var words = new_value.split(' ');
                start += new_char.length;
                end = start;

                if(maxlength === null || new_value.length <= maxlength)
                    e.preventDefault();
                else
                    return;

                for (var i = 0; i < words.length; i++){
                    words[i] = words[i].toLowerCase();

                    if(not_capitalize.indexOf(words[i]) == -1)
                        words[i] = PHP.ucfirst(words[i]);
                }

                this.value = words.join(' ');
                this.setSelectionRange(start, end);
            }
        });
    }

    $.fn.maskLowerName = function(pos) {
        $(this).css('text-transform', 'lowercase').bind('blur change', function(){
            this.value = this.value.toLowerCase();
        });
    }

    $.fn.maskUpperName = function(pos) {
        $(this).css('text-transform', 'uppercase').bind('blur change', function(){
            this.value = this.value.toUpperCase();
        });
    }
})(jQuery);

Ответ 15

С Javascript вы можете использовать:

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

Если вы создаете свою веб-страницу случайно PHP, вы также можете использовать:

<?=ucfirst($your_text)?>

Ответ 16

    .first-character{
        font-weight:bold;
        color:#F00;
        text-transform:capitalize;
   }
.capital-text{
    text-transform:uppercase;
    }

Ответ 17

Jquery или Javascipt не обеспечивают встроенный метод для достижения этого.

Преобразование теста CSS (text-transform:capitalize;) на самом деле не капитализирует строковые данные, а показывает заглавную визуализацию на экране.

Если вы ищете более законный способ для достижения этого на уровне данных с помощью простого vanillaJS, используйте это решение = > 

var capitalizeString = function (word) {    
    word = word.toLowerCase();
    if (word.indexOf(" ") != -1) { // passed param contains 1 + words
        word = word.replace(/\s/g, "--");
        var result = $.camelCase("-" + word);
        return result.replace(/-/g, " ");
    } else {
    return $.camelCase("-" + word);
    }
}

Ответ 18

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

CSS

#field {
    text-transform: capitalize;
}

JQuery

$('#field').keyup(function() {
    var caps = jQuery('#field').val(); 
    caps = caps.charAt(0).toUpperCase() + caps.slice(1);
    jQuery('#field').val(caps);
});

Ответ 19

Моя попытка.

Действует только в том случае, если весь текст в нижнем регистре или весь в верхнем регистре, использует преобразование регистра Locale. Попытки уважать преднамеренную разницу регистра или "или" в именах. Бывает на Blur, чтобы не вызывать раздражений на телефонах. Хотя оставлено в начале/конце выделения, поэтому, если оно изменено на keyup, оно может быть полезным. Должен работать на телефонах, но не пытался.

$.fn.capitalize = function() {
    $(this).blur(function(event) {
        var box = event.target;
        var txt = $(this).val();
        var lc = txt.toLocaleLowerCase();
        var startingWithLowerCaseLetterRegex = new RegExp("\b([a-z])", "g");
        if (!/([-'"])/.test(txt) && txt === lc || txt === txt.toLocaleUpperCase()) {
            var stringStart = box.selectionStart;
            var stringEnd = box.selectionEnd;
            $(this).val(lc.replace(startingWithLowerCaseLetterRegex, function(c) { return c.toLocaleUpperCase() }).trim());
            box.setSelectionRange(stringStart, stringEnd);
        }
    });
   return this;
}

// Usage:
$('input[type=text].capitalize').capitalize();

Ответ 20

Небольшое обновление для решения cumul.

Функция upperFirstAll не работает должным образом, если между словами имеется более одного пробела. Замените для этого регулярное выражение:

$(this).val(txt.toLowerCase().replace(/^(.)|(\s|\-)+(.)/g,