React.js: onChange event for contentEditable
See Sebastien Lorber's answer which fixes a bug in my implementation.
Use the onInput event, and optionally onBlur as a fallback. You might want to save the previous contents to prevent sending extra events.
I'd personally have this as my render function.
var handleChange = function(event){
this.setState({html: event.target.value});
}.bind(this);
return (<ContentEditable html={this.state.html} onChange={handleChange} />);
jsbin
Which uses this simple wrapper around contentEditable.
var ContentEditable = React.createClass({
render: function(){
return <div
onInput={this.emitChange}
onBlur={this.emitChange}
contentEditable
dangerouslySetInnerHTML={{__html: this.props.html}}></div>;
},
shouldComponentUpdate: function(nextProps){
return nextProps.html !== this.getDOMNode().innerHTML;
},
emitChange: function(){
var html = this.getDOMNode().innerHTML;
if (this.props.onChange && html !== this.lastHtml) {
this.props.onChange({
target: {
value: html
}
});
}
this.lastHtml = html;
}
});
React onChange not triggering from Div
I was able to fix this by using adding a small function in the parent component and then calling it as a prop in an onInput
function, while leaving the onChange
function set to props.onChange. The function was taken from the article below.
http://usefulangle.com/post/41/javascript-textarea-autogrow-adjust-height-based-on-content
contenteditable change events
2022 update
As pointed out in the comments, this doesn't answer the question asked, which wanted the equivalent of the change
event rather than the input
event. However, I'll leave it here as is.
Original answer
I'd suggest attaching listeners to key events fired by the editable element, though you need to be aware that keydown
and keypress
events are fired before the content itself is changed. This won't cover every possible means of changing the content: the user can also use cut, copy and paste from the Edit or context browser menus, so you may want to handle the cut
copy
and paste
events too. Also, the user can drop text or other content, so there are more events there (mouseup
, for example). You may want to poll the element's contents as a fallback.
UPDATE 29 October 2014
The HTML5 input
event is the answer in the long term. At the time of writing, it is supported for contenteditable
elements in current Mozilla (from Firefox 14) and WebKit/Blink browsers, but not IE.
Demo:
document.getElementById("editor").addEventListener("input", function() {
console.log("input event fired");
}, false);
<div contenteditable="true" id="editor">Please type something in here</div>
React.js: Datepicker on contentEditable
You can use this DatePicker which allow you to have a customInput
<DatePicker
className="date p-1"
selected={date !== null ? new Date(Moment(date).format('YYYY/MM/DD')) : null}
onChange={date => handleChangeDateTask(Moment(date).format('DD/MM/YYYY'), id)}
customInput={<ContentEditable
html={date !== null ? Moment(date).format('DD/MM/YYYY') : ''}
disabled={false}
onBlur={(event) => handleChangeTask(event, id, 'date')}
onFocus={(event) => handleFocusTask(event)}
/>}
/>
Tag picker onChange event not firing
onChange
event triggers when user pick something from suggestions list or remove item from picker. What you can do is to use onInputChange
event:
<TagPicker
...
onInputChange={value => {
// Do something.
return value;
}}
/>
Codepen working example.
Related Topics
How to Download File from Server
JavaScript Getelementbyid() Not Working
New Line in JavaScript Alert Box
Secure Random Numbers in JavaScript
Destructuring and Rename Property
Calling Setstate in a Loop Only Updates State 1 Time
Handle Url Fragment Identifier (Anchor) Change Event in JavaScript
JavaScript If Statement with Multiple Permissible Conditions
Browser Event When Downloaded File Is Saved to Disk
Undefined Values in Array(Len) Initializer
Classical Inheritance VS Prototypal Inheritance in JavaScript
How to Suppress the Browser's Authentication Dialog
Why Does JavaScript Hoist Variables
Is a JavaScript Array Index a String or an Integer
What Does the Function Then() Mean in JavaScript