在Textarea中将每个单词的首字母大写的Javascript Bug

时间:2017-01-25 06:18:17

标签: javascript jquery html

我是一个小博客,我对Javascript知之甚少。 在textarea中输入时,我有两个与将每个单词的首字母大写相关的问题。 Stack Overflow上的一些我已经找到了下面给出的js代码。它工作正常,但有一个错误。

问题1: 当用户输入单行时,它会将所有单词大写,但它不会在每个换行符后大写第一个单词,或者说当用户点击Enter进入下一行时它会使第一个字母保持小而不是大写。

问题2: 如果用户在单词之前放置逗号或句号,则它也不会将单词大写。

我想要的! 在任何情况下,如果用户在逗号,句号,连字符,感叹号和其他基本特殊字符后没有给出空格,则所有单词都应该大写并自动在单词之前提供空格。

Live Example

以下是我的代码:

$(window).load(function() {
  $.fn.capitalize = function() {
    $.each(this, function() {
      var split = this.value.split(' ');
      for (var i = 0, len = split.length; i < len; i++) {
        split[i] = split[i].charAt(0).toUpperCase() + split[i].slice(1).toLowerCase();
      }
      this.value = split.join(' ');
    });
    return this;
  };
  $('input#author').on('keyup', function() {
    $(this).capitalize();
  }).capitalize();
  $('textarea#comment').on('keyup', function() {
    $(this).capitalize();
  }).capitalize();
});
$(window).load(function() {
  $('input#email').keyup(function() {
    $(this).val($(this).val().toLowerCase());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<textarea minlength="120" id="comment" name="comment" cols="45" rows="8" aria-required="true" placeholder="Shayari"></textarea>

1 个答案:

答案 0 :(得分:0)

您可以尝试按以下步骤更新您的代码

$(window).load(function() {

  $.fn.capitalize = function() {
    $.each(this, function() {
      var lines = this.value.split('\n');
      for (var i = 0; i < lines.length; i++) {
          var split = lines[i].split(' ');
          for (var j = 0, len = split.length; j < len; j++) {
            split[j] = split[j].charAt(0).toUpperCase() + split[j].slice(1).toLowerCase();
          }

          lines[i] = split.join(' ');
      }
      this.value = lines.join('\n');
    });
    return this;
  };

  $('input#author').on('keyup', function(e) {
    var $control = $(e.currentTarget);
    // Give space after comma, full stop, hyphen, exclamation mark 
    var newValue = $control.val().replace(/([\,\.\-\!])(\w)/g, '$1 $2');
    $control.val(newValue);
    $(this).capitalize();
  }).capitalize();

  $('textarea#comment').on('keyup', function(e) {
    var $control = $(e.currentTarget);
    // Give space after comma, full stop, hyphen, exclamation mark 
    var newValue = $control.val().replace(/([\,\.\-\!])(\w)/g, '$1 $2');
    $control.val(newValue);
    $(this).capitalize();
  }).capitalize();

  $('input#email').on('keyup', function() {
    $(this).val($(this).val().toLowerCase());
  });      

});

我在https://jsfiddle.net/r4w43L2k/5/创建了一个示例,您可以查看它。