JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="https://unpkg.com/doctor-jones/dist/index.umd.min.js"></script>
<span>Input:</span>
<input type="text" value="doctor-jones是一个“治疗”中英文混排格式的工具">

<span>Output:</span>
<p></p>

CSS

input {
  display: block;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  padding: 4px 10px;
  font-size: 14px;
  margin: 5px 0 15px;
}

p {
  border: solid 1px #ddd;
  background-color: #fafafa;
  padding: 10px;
  font-size: 14px;
  margin: 5px 0;
}

JavaScript

const input = document.querySelector('input')
const result = document.querySelector('p')

const format = input => {
  result.innerText = dj(input)
}

input.addEventListener('input', e => {
  if (e.target.value) {
    format(e.target.value)
  }
})

format(input.value)