如何在行内比较HTML输入框的value与defaultValue并动态添加类？

方案1：通过event.target直接操作元素（推荐） #

行内代码里用event.target替代this来获取当前输入框，完美规避this指向错误的问题。代码示例：

<input type="text" defaultValue="默认内容" oninput="event.target.classList.toggle('highlight', event.target.value !== event.target.defaultValue)">

原理：oninput事件触发时，event.target就是当前输入元素本身，通过classList.toggle的第二个布尔参数，自动在内容不等于默认值时添加highlight类，否则移除。

方案2：通过ID直接定位元素（适合简单场景） #

如果输入框有唯一ID，也可以直接通过ID获取元素来操作，写法更直白：

<input id="uniqueInput" type="text" defaultValue="默认内容" oninput="const el = document.getElementById('uniqueInput'); el.classList.toggle('highlight', el.value !== el.defaultValue)">

这种写法不需要依赖事件对象，重复获取元素的开销在单个元素场景下可以忽略。

页面加载时的初始化处理 #

如果需要页面加载完成就检查初始状态（比如后端渲染时修改了默认值），可以给输入框加onload事件完成初始化：

<input type="text" defaultValue="默认内容" 
       oninput="event.target.classList.toggle('highlight', event.target.value !== event.target.defaultValue)"
       onload="this.classList.toggle('highlight', this.value !== this.defaultValue)">

这里onload事件里的this是指向输入元素的，不会出现指向错误。

内容的提问来源于stack exchange，提问作者NicholasTW