DEV Community

loading...

Wrapping text input with non editable element at front

Rafi
I'm a developer who works mostly with Javascript.
・1 min read

I recently had to build text input that wraps to the next line but has non editable element at the start. Apparently it is quite easy to build with content editable here is the code snippet that does that

import React, { useCallback } from "react";

const WrappingInput = () => {
  const handlePaste = useCallback(event => {
    event.preventDefault();
    const value = event.clipboardData.getData("text/plain");
    document.execCommand("insertHTML", false, value);
  }, []);

  return (
    <div className="wrapping-input">
      <span>Label</span>
      <span contentEditable onPaste={handlePaste} />
    </div>
  );
};

export default WrappingInput;

Enter fullscreen mode Exit fullscreen mode

and the corresponding css

.wrapping-input > span:first-child {
  padding: 0.1em 0.5em;
  background: #ccc;
}

.wrapping-input > span:last-child {
  padding: 0.1em 0.5em;
  outline: none;
}
Enter fullscreen mode Exit fullscreen mode

and you get text input like this.

Alt Text

Discussion (0)