React Input and Textarea with Placeholder Shim
PlaceholderShim
provides Input
and Textarea
, small wrappers around React.createElement('input')
and React.createElement('textarea')
respectively that shims in placeholder
functionality for browsers that don't natively support it. Currently only tested with IE9.
Demo: https://jsfiddle.net/69z2wepo/16498/
Getting Started
Browserify
Install: npm install react-input-placeholder
Require:
Input = ReactInput;Textarea = ReactTextarea;
No module
The compiled bundle sits in the dist/
folder.
<script src='dist/react-input-placeholder.min.js'></script><script> var Input = PlaceholderShimInput; var Textarea = PlaceholderShimTextarea;</script>
Usage
You can use Input
or Textarea
exactly the same way you'd use React.createElement('input')
or <input />
in JSX. All attributes will be passed on, and all event callbacks will be called. However, please note that the placeholder shim only works on controlled inputs (i.e., you must provide a value
or valueLink
prop).
When the placeholder text is visible, the placeholder
CSS class will be added to the input
element so you can style it, e.g.
Before
Placeholder doesn't show on IE9.
After
Works on IE9!
Building yourself
npm installgrunt dist
License
MIT