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には簡単な1行の文字列しか設定できません。たとえ改行に入れても改行として認識されないので、複数行の文章の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 属性で改行するには

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.