Disable backspace navigation when textarea has content react mixin

backspace_nav_handler_mixins.js

module.exports = {
  disableBackspaceNavEvent: function(event) {
    if (event.keyCode == 8) {
      if (event.target.type && event.target.type.match(/text/)) {
        return true
      } else {
        event.preventDefault()
      }
    }
  },
  disableBackspaceNav: function() {
    window.removeEventListener('keydown', this.disableBackspaceNavEvent)
    window.addEventListener('keydown', this.disableBackspaceNavEvent)
  },

  enableBackspaceNav: function() {
    window.removeEventListener('keydown',this.disableBackspaceNavEvent)
  },

  componentWillUnmount: function() {
    this.enableBackspaceNav()
  }
}

module_with_textarea.jsx

var React = require('react')
var BackspaceNavHandler = require('backspace_nav_handler_mixins')

module.exports = React.createClass({

  mixins: [ BackspaceNavHandler ],
  
  render: function() {
    return (
      <textarea onBlur={this.disableBackspaceNav} onFocus={this.enableBackspaceNav} />      
    )
  }

})

You may also want to make sure your input has value here, and only bother blocking the nav event if the input has content.

This is a really crude instance. Obviously if you have multiple inputs with user-generated values, you probably want something more robust.

Ran into a situation where the component was visible but user brought focus to an entirely unrelated field on the page and of course backspace wouldn't work. This should fix that but will probably fail in contenteditables. Needs a good "is DOM element and input" test.