diff --git a/README.md b/README.md
index 6a7fcd8..97ed77a 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,10 @@ npm install react-contenteditable --save
var ContentEditable = require("react-contenteditable");
var MyComponent = React.createClass({
getInitialState: function(){
- return {html: "Hello World"};
+ return {
+ placeholder: "placeholder...",
+ html: "Hello World"
+ };
},
handleChange: function(evt){
@@ -22,6 +25,7 @@ npm install react-contenteditable --save
render: function(){
return
diff --git a/lib/react-contenteditable.js b/lib/react-contenteditable.js
index dc8480c..10209db 100644
--- a/lib/react-contenteditable.js
+++ b/lib/react-contenteditable.js
@@ -25,11 +25,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
var ContentEditable = function (_React$Component) {
_inherits(ContentEditable, _React$Component);
- function ContentEditable() {
+ function ContentEditable(props) {
_classCallCheck(this, ContentEditable);
- var _this = _possibleConstructorReturn(this, (ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call(this));
+ var _this = _possibleConstructorReturn(this, (ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call(this, props));
+ _this.html = '';
+ _this.active = false;
_this.emitChange = _this.emitChange.bind(_this);
return _this;
}
@@ -42,16 +44,35 @@ var ContentEditable = function (_React$Component) {
var _props = this.props,
tagName = _props.tagName,
html = _props.html,
- props = _objectWithoutProperties(_props, ['tagName', 'html']);
+ placeholder = _props.placeholder,
+ props = _objectWithoutProperties(_props, ['tagName', 'html', 'placeholder']);
+
+ if (placeholder !== undefined && html.trim().length <= 0 && !this.active) {
+ this.html = placeholder;
+ } else {
+ this.html = html;
+ }
return _react2.default.createElement(tagName || 'div', _extends({}, props, {
ref: function ref(e) {
return _this2.htmlEl = e;
},
onInput: this.emitChange,
- onBlur: this.props.onBlur || this.emitChange,
+ onFocus: function onFocus(evt) {
+ _this2.active = true;
+ if (placeholder !== undefined && _this2.htmlEl.innerHTML === placeholder) {
+ _this2.html = html;
+ _this2.htmlEl.innerHTML = '';
+ }
+ },
+ onBlur: function onBlur(evt) {
+ _this2.active = false;
+ if (_this2.htmlEl.innerHTML.length === 0) _this2.htmlEl.innerHTML = placeholder;
+
+ if (_this2.props.onBlur) _this2.props.onBlur(evt);else _this2.emitChange(evt);
+ },
contentEditable: !this.props.disabled,
- dangerouslySetInnerHTML: { __html: html }
+ dangerouslySetInnerHTML: { __html: this.html }
}), this.props.children);
}
}, {
diff --git a/src/react-contenteditable.js b/src/react-contenteditable.js
index fde368b..fcf3bcd 100644
--- a/src/react-contenteditable.js
+++ b/src/react-contenteditable.js
@@ -1,13 +1,21 @@
import React from 'react';
export default class ContentEditable extends React.Component {
- constructor() {
- super();
+ constructor(props) {
+ super(props);
+ this.html = '';
+ this.active = false;
this.emitChange = this.emitChange.bind(this);
}
render() {
- var { tagName, html, ...props } = this.props;
+ var { tagName, html, placeholder, ...props } = this.props;
+
+ if (placeholder !== undefined && html.trim().length <= 0 && !this.active) {
+ this.html = placeholder;
+ } else {
+ this.html = html;
+ }
return React.createElement(
tagName || 'div',
@@ -15,9 +23,25 @@ export default class ContentEditable extends React.Component {
...props,
ref: (e) => this.htmlEl = e,
onInput: this.emitChange,
- onBlur: this.props.onBlur || this.emitChange,
+ onFocus: (evt) => {
+ this.active = true;
+ if (placeholder !== undefined && this.htmlEl.innerHTML === placeholder) {
+ this.html = html;
+ this.htmlEl.innerHTML = '';
+ }
+ },
+ onBlur: (evt) => {
+ this.active = false;
+ if (this.htmlEl.innerHTML.length === 0)
+ this.htmlEl.innerHTML = placeholder;
+
+ if (this.props.onBlur)
+ this.props.onBlur(evt)
+ else
+ this.emitChange(evt)
+ },
contentEditable: !this.props.disabled,
- dangerouslySetInnerHTML: {__html: html}
+ dangerouslySetInnerHTML: {__html: this.html}
},
this.props.children);
}