UI5中editable=false时如何显示Input的placeholder？

遇到readonly（或editable=false）的输入框占位符不显示的情况很常见，核心原因是部分浏览器默认会对不可编辑的输入框隐藏placeholder样式。下面给你几个实用的解决方案，都能完整保留你的点击事件：

方案1：用CSS强制显示Placeholder #

直接通过CSS伪类覆盖浏览器的默认样式，让readonly状态下的placeholder强制显示：

/* 适配不同浏览器的伪类 */
input[readonly]::-webkit-input-placeholder {
  color: #999; /* 自定义占位符颜色 */
  opacity: 1; /* 确保占位符不透明 */
}
input[readonly]::-moz-placeholder {
  color: #999;
  opacity: 1;
}
input[readonly]:-ms-input-placeholder {
  color: #999;
  opacity: 1;
}

这个方法简单直接，不需要改动JS逻辑，缺点是要考虑浏览器兼容性，但主流浏览器都支持这些伪类，基本能覆盖大部分场景。

方案2：替换readonly为JS阻止输入 #

如果不想依赖CSS，也可以去掉readonly属性，通过JavaScript拦截所有输入行为，这样输入框依然保持可聚焦状态，placeholder自然会正常显示，同时点击事件不受任何影响：

<input type="text" placeholder="点击触发事件" id="nonEditableInput">
<script>
const input = document.getElementById('nonEditableInput');

// 拦截所有输入相关操作
input.addEventListener('keydown', (e) => e.preventDefault());
input.addEventListener('paste', (e) => e.preventDefault());
input.addEventListener('contextmenu', (e) => e.preventDefault()); // 禁用右键粘贴

// 你的点击事件逻辑
input.addEventListener('click', () => {
  console.log('输入框被点击啦！');
  // 这里写入你的业务代码
});
</script>

这种方法兼容性拉满，而且输入框的交互体验更接近普通输入框（比如可以正常聚焦），适合需要保留输入框原有视觉状态的场景。

方案3：自定义模拟Placeholder（适合contenteditable元素） #

如果你的"Input标签"其实是用contenteditable="false"的div模拟的输入框，那可以通过自定义属性+CSS伪元素来实现占位符效果：

<div contenteditable="false" data-placeholder="请点击我" id="fakeInput"></div>
<style>
#fakeInput {
  border: 1px solid #ddd;
  padding: 8px;
  min-height: 24px;
  cursor: pointer; /* 提示用户可点击 */
}
/* 当元素为空时显示占位符 */
#fakeInput:empty::before {
  content: attr(data-placeholder);
  color: #999;
}
</style>
<script>
const fakeInput = document.getElementById('fakeInput');
fakeInput.addEventListener('click', () => {
  console.log('模拟输入框被点击');
});
</script>

这个方法完全自定义，样式和行为都能自己把控，适合需要高度定制输入框样式的场景。

你可以根据自己的实际业务场景选择合适的方案，测试下来都能正常保留点击事件并显示占位符~

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