输入无效时显示工具提示/消息 HTML/JS/CSS/Angularjs答案

【问题标题】：Display tooltip/message while input is invalid HTML/JS/CSS/Angularjs输入无效时显示工具提示/消息 HTML/JS/CSS/Angularjs
【发布时间】：2018-10-26 16:49:18
【问题描述】：

我有一个不允许使用某些字符的 HTML 输入字段。功能部分已解决，但我想在输入字段旁边显示一个工具提示/消息而它包含非法字符。

我有一个布尔值来跟踪这一点，但我无法制作令人满意的工具提示/消息。

我尝试过调整 uib-tooltip，但它需要用户将鼠标悬停在输入区域上。我尝试制作一个基于布尔值隐藏/显示的 span/div/label，但我的 CSS 技能还不够强。

该应用使用 Angularjs 和 Bootstrap 3。

输入字段不是表单的一部分。

【问题讨论】：

您可以使用tooltip-is-open 属性手动设置uib-tooltip 的可见性。只需使用与您相同的布尔值来跟踪无效字符。
谢谢，工作就像一个魅力！

标签： javascript html css angularjs

【解决方案1】：

你在哪里捕捉到布尔值只是说在输入旁边显示 div

myDiv.visible = true;

【讨论】：

【解决方案2】：

不知道你确切的 Javascript，我无法直接回答。

我会做类似的事情

function invalid() {
  if (invalid = true) {
    document.getElementById("alert").style.visibility = 'visible'
  }
}

确保错误消息设置为隐藏，

然后让检查器功能在焦点上运行..

<input type="text" onfocus="invalid()">

https://jsfiddle.net/we67geke/1/

【讨论】：

【解决方案3】：

用户Lex的这条评论解决了这个问题。

您可以使用手动设置 uib-tooltip 的可见性 tooltip-is-open 属性。只需使用您正在使用的相同布尔值跟踪无效字符。

【讨论】：

【解决方案4】：

正如你所说的

该应用使用 Angularjs 和 Bootstrap 3。

我建议您应该使用 Boostrap 工具提示。将$('#element').tooltip('show') 和$('#element').tooltip('hide') 与您的标志一起使用来处理工具提示的状态。

我不知道你的代码是如何工作的，我的想法是这样的：

HTML：

<input type=text (keypress)="eventHandler()"> // angular >= 2

<input type=text ng-keypress="eventHandler()"> // angular 1

角度代码：

eventHandler() {
  if (isIllegal) {
    $('#element').tooltip('show');
  } else {
    $('#element').tooltip('hide');
  }
}

类似的东西。

引导工具提示： https://getbootstrap.com/docs/3.3/javascript/#tooltips

【讨论】：