无论如何要在只读文本字段中添加工具提示

Posted 2023-05-08

【中文标题】无论如何要在只读文本字段中添加工具提示

【英文标题】：Is there Anyway to add tooltip in a readonly textfields

【发布时间】：2020-06-08 00:57:26

【问题描述】：

我想使用 jquery 在只读字段中添加工具提示。从只读文本框中读取数据并显示为工具提示。我无法在谷歌的任何地方找到它的解决方案

 $(document).ready(function () 
    $('#nextDate').keyup(function () 
        $(this).attr('title', $(this).val())
    )
) 

html

 <td><input type="text" title="" id="nextdate" class="form-control" readonly=""/></td>

但它不起作用

【问题讨论】：

它不起作用，因为默认情况下元素上没有title，并且您设置title的代码将永远不会像在keyup事件上设置的那样运行，但元素是readonly 所以关键事件永远不会发生。我不确定你在这里期待什么。

我希望从只读字段中读取值并将其显示为工具提示。

我的代码适用于普通字段，但此代码不适用于只读字段

我认为 keyup 不支持只读字段。最好你尝试一些其他事件，如 on-focus-out ....

它也不能在焦点上工作，你知道有什么插件吗？

【参考方案1】：

你不应该在 readonly 中插入任何字符串，如果你插入任何自定义字符串，比如 readonly="Hi this is readonly"，Readonly 应该是 true/false 或 readonly="readonly"。 这将使输入在 chrome 等智能浏览器中为只读，但在旧浏览器中可能会中断。因此，如果您想显示任何自定义消息，那么您可以像这样创建和自定义属性：

 <input type="text" readonly="readonly" data-readonly="hi, i am readonly" value="Hi i am input3" />

你可以通过以下方式获取这个值：

$(this).attr('data-readonly')

你也可以检查这个小提琴： https://jsfiddle.net/nr06Lmte/

【参考方案2】：

我正在使用 mouse over 事件而不是 keyup 事件。可能对您有用。

  <td><input type="text" title="hello" id="nextdate" class="form-control" value="2020-10-10" readonly="" onmouseover="myFunction()"/></td>
<script>
function myFunction()
 document.getElementById('nextdate').setAttribute('title',   document.getElementById('nextdate').value);

</script>

【讨论】：

我想读取只读字段中的值，它现在没有读取

正在使用任何事件来绑定 nextdate 字段中的值？？