フォームなどで使う文字列周りの処理

  • 6
    Like
  • 0
    Comment
More than 1 year has passed since last update.

フォーム周りの対応でよく使いそうなjs処理を備忘録程度に書いておきます。

maxlengthの対応

基本的にはこれで良さそうだけれども、マルチバイト対策が必要な可能性があるようです。

<input type="text" maxlength="20">

また、古いブラウザだと対応してなかったりするので、以下のように最大文字数超えたら消すようにしています。

jQuery
  $('input[type^="text"]').on('input', function() {

    const maxLength = $(this).attr('maxlength');
    const strValue = $(this).val();

    if (strValue.length > maxLength) {
        $(this).val( strValue.slice(0, maxLength) );
    }

  });

空行の判定

isEmpty.js
  function isEmpty(strArr) {

    for(let i = 0; i < strArr; i++) {
      if( strArr[i].replace(/\s*/g, '') === '' ) return = true;
    }

    return false;

  }

NGワード検出

超簡単なNGワード検出。

この場合、語尾につける「〜だしね」などもNGワードとして検出してしまうので、注意してください。
NGワードは大量にある場合がほとんどなので、jsonなどで別ファイルから読み込んでもいいかと思います。

data/ngwords.json
{
  "data": ["アダルト", "AV", "死ね", "しね"]
}
hasNGWords.js
// JSONデータの読み込み
let ngwords = [];
$.getJSON('data/ngwords.json', json => {
  ngwords = json.data;
});

function hasNGWords(str, ngwords) {

  for(let i = 0; i < ngwords.length; i++) {
    if(~str.indexOf(ngwords[i])) return true;
  }

  return false;

}

行数のカウント

<textarea>であれば、DOM.scrollHeightで要素内の高さが取れます。
ただし、初期の高さは<textarea>の高さになるので、それ以下の場合は表示させないか別の計算をしなければいけなさそうです。

function countLine() {

  // カウントしたいテキスト入力欄のDOM
  // jQueryの場合は$('#textform')[0]
  const textarea = document.getElementById('textform');

  // 文字の高さ(line-height込み、単位はpx)
  const TEXT_HEIGHT = 24;

  return Math.floor(textarea.scrollHeight / TEXT_HEIGHT);

}

ゼロパディング

以下の記事で紹介しているのが利用できます。
javascriptでゼロ埋め

placeholderの複数行対応

現存サイトで書かれてある

  • CSSのafter/a使う
  • 実際にplaceholder属性内で改行させておく

などの対応だと、ブラウザごとに対応・非対応が難しいので、プログレッシブ・エンハンスメントなどを考えないかぎりしないほうが良いです。

現状ではjsでvalの属性を置き換えるのが良いかと思います。
focus blur時の挙動が実際のplaceholderとはちがいますが、問題ないレベルだと思います。

この記事のコードを利用しています。
HTML5のplaceholder属性をjQueryでやってみる

placeholder.js

  $('.is-placeholder').each(function() {
    let elem = $(this);
    const DEFAULT_PLACEHOLDER_COLOR = 'silver';

    (function(elm) {

      $.data(elm, 'placeholder-string', $(elm).attr('value'));
      $.data(elm, 'placeholder-color', $(elm).css('color'));

      switch ( $(elm).val() ) {
          case '' :
              $(elm).val($.data(elm, 'placeholder-string'));
          case $.data(elm, 'placeholder-string') :
              $(elm).css('color', DEFAULT_PLACEHOLDER_COLOR);
          break;
      }
      $(elm).focus(function() {
          if($(this).val() == $.data(this, 'placeholder-string')) {
              $(this).val('');
              $(this).css('color', $.data(this, 'placeholder-color'));
          }
      });
      $(elm).blur(function() {
          if($(this).val() == '') {
              $(this).val($.data(this, 'placeholder-string'));
              $(this).css('color', DEFAULT_PLACEHOLDER_COLOR);
          }
      });
    })(this)

  });

参考記事