如何为input标签添加闪烁光标/插入符（caret）效果

你当前代码里输入框加了readonly属性，浏览器默认会禁用可编辑状态下的闪烁插入光标，再加你写了行内样式cursor:pointer，鼠标悬停只会显示手型指针，按你的实际需求选对应方案即可：

方案1：仅显示鼠标悬停的文本型光标，保留只读属性 #

适合计算器仅支持按钮点击输入、不允许用户直接键盘修改输入框内容的场景：

• 把行内样式里的cursor:pointer改成cursor:text，鼠标悬停时就会显示常规的文本输入I型光标
• 保留readonly属性，不会出现闪烁插入符，也不会响应用户直接键盘输入
  修改后代码：

<div class="first-row">
 <input type="text" name="result" id="result" placeholder="Enter and get result!" style="cursor:text" readonly />
</div>

方案2：同时显示鼠标文本光标+闪烁插入符，允许键盘输入 #

如果需要支持用户直接在输入框敲键盘输入计算内容，直接移除readonly属性和行内写死的cursor:pointer样式即可，浏览器会自动给可编辑输入框匹配默认的文本光标和闪烁插入符：

<div class="first-row">
 <input type="text" name="result" id="result" placeholder="Enter and get result!" />
</div>

方案3：保留「不允许直接键盘输入」的逻辑，同时显示闪烁插入符 #

如果想要只读的交互逻辑（只能点计算器按钮输入内容），又要有闪烁光标模拟可输入的视觉效果，不用自己写CSS模拟光标，用事件拦截就行：

1. 移除readonly属性，把输入框鼠标样式改成cursor:text
2. 加JS拦截输入框的键盘默认行为，阻止用户直接敲入内容
3. 可选：页面加载后自动聚焦输入框，打开页面就能看到闪烁光标
   参考代码：

<div class="first-row">
 <input type="text" name="result" id="result" placeholder="Enter and get result!" style="cursor:text" />
</div>

<script>
const calcInput = document.getElementById('result')
// 拦截键盘直接输入
calcInput.addEventListener('keydown', e => e.preventDefault())
// 自动聚焦显示闪烁光标
calcInput.focus()
</script>

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