悬停时：如何在 Extjs 的 textarea 字段中显示带有复制选项的工具提示

Posted 2023-02-26

【中文标题】悬停时：如何在 Extjs 的 textarea 字段中显示带有复制选项的工具提示

【英文标题】：On Hover : How to show a tool tip with copy option for all url's inside a textarea field in Extjs

【发布时间】：2019-09-20 07:49:00

【问题描述】：

我是 ExtJs 的新手，在这里我有一个来自 API 响应的 textareafield 绑定数据。

我想要做的是，如果响应中有任何网址，我想在用户将鼠标悬停在其上时显示带有复制选项的工具提示之类的东西。谁能帮我得到这个。

代码：

xtype: 'textareafield',
fieldLabel: 'Reponse',
name: 'response',
align: 'stretch',
allowBlank: false,
flex: 1

response.setValue(StringUtils.addhtmlBreaks(record.get('response')));

谢谢..

【问题讨论】：

如果我为您提供在 textarea 上显示提示的答案，那么您可以在显示它时处理任何条件，因为我没有得到 URL 逻辑。请回复相同。

只有当悬停的文本是文本区域内的 url @Tejas 时，我才需要显示

只有带有复制选项（剪贴板）@Tejas 的悬停的 URL 内容

我正在满足您的要求。我会把这个作为答案发布，然后你可以在那里查看。

好的，感谢@Tejas 抽出宝贵时间...！

【参考方案1】：

我创建了一个简单的小提琴，其中显示了一个文本区域和绑定的鼠标事件，并在this fiddle 中相应地显示了提示。

textarea.on('mouseover',function(evt,field)
  //Show tip if url matches
,this);

textarea.on('mouseout',function()
  //just hide tip
,this);    

和text.match(/\bhttps?:\/\/\S+/gi)在textarea中匹配的url

在这个小提琴中，我没有实现复制，因为我想确认这种行为是否适合你。请检查并回复相同，如果代码中的任何编辑建议相同。

【讨论】：

但我无法从工具提示@Tejas 复制网址

复制后我会更新答案，我只是在确认你是否想要这个东西。

它会在工具提示中显示全部内容，但我只需要显示 URL，例如 www.something.com 、http:\\something 、http;\\something 等...