react-textarea-compatibleコンポーネント:ブラウザの違いを吸収する

html5のtextareaの取り扱いにブラウザ間の微妙な違いを吸収するために、react-textarea-compatibleコンポーネントをnpm上に公開しました。

npm package

react-textarea-compatible

github

ソースコード

機能概要

• maxlengthの制御
  　Safariの場合は、textareaのmaxlength属性設定の代わりに、本コンポーネント内の独自の処理ロジック行い、textarea領域に入力された改行が2文字ではなく1文字として扱うようにします。
  　その他ブラウザでは、maxlengthを設定することでブラウザに任せます。

• 複数行のplaceholder
  　標準のplaceholderには簡単な１行の文字列しか設定できません。たとえ改行に入れても改行として認識されないので、複数行の文章のplaceholderの設定が無理です。
  　本コンポーエントを利用すれば、複数行のplaceholderが可能になります。

使い方

• インストール

npm install react-textarea-compatible --save


• 実装

import TextareaCompatible from 'react-textarea-compatible';

React.renderComponent(
  <div>
    <TextareaCompatible
      value={this.state.memo}
      maxLength={30}
      placeholder="this is \na \nmultiple line \nplaceholder"
    />
  </div>,
  document.querySelector('#element'));

• サンプルページ

DEMO

参考記事

safariの場合textareaのplaceholder改行問題
textarea 要素内の placeholder 属性で改行するには