[英]Display tooltip/message while input is invalid HTML/JS/CSS/Angularjs
I have an HTML input field where certain characters shouldn't be allowed. 我有一个HTML输入字段,其中不允许使用某些字符。 The functional part is solved, but I would like to display a tooltip/message next to the input field while it contains illegal characters.
功能部分已解决,但是当包含非法字符时,我想在输入字段旁边显示工具提示/消息。
I have a boolean which keeps track of this, but I've been unable to make a satisfactory tooltip/message. 我有一个布尔值可以跟踪此情况,但是我无法给出令人满意的工具提示/消息。
I've tried tweaking uib-tooltip, but It requires the user to hover over the input area. 我尝试过调整uib-tooltip,但是它要求用户将鼠标悬停在输入区域上。 I've tried making a span/div/label that's hidden/displayed based on the boolean, but my CSS skills aren't strong enough.
我曾尝试根据布尔值创建隐藏/显示的span / div / label,但是我的CSS技能不够强。
The app uses Angularjs and Bootstrap 3. 该应用程序使用Angularjs和Bootstrap 3。
The input field is not part of a form. 输入字段不是表单的一部分。
您在其中捕获布尔值的地方只是说要在输入旁边显示div,例如
myDiv.visible = true;
Without knowing your exact Javascript, I can't really answer it directly. 不知道您的确切Javascript,我无法真正直接回答它。
I would do something like 我会做类似的事情
function invalid() {
if (invalid = true) {
document.getElementById("alert").style.visibility = 'visible'
}
}
make sure the error message is set to hidden, 确保错误消息设置为隐藏,
then have the checker function run on focus.. 然后让检查器功能集中运行。
<input type="text" onfocus="invalid()">
https://jsfiddle.net/we67geke/1/ https://jsfiddle.net/we67geke/1/
This comment by user Lex solved the problem. 用户Lex的评论解决了这个问题。
You can manually set the visibility of the uib-tooltip using the tooltip-is-open attribute.
您可以使用tooltip-is-open属性手动设置uib-tooltip的可见性。 Simply use the same boolean you are using to keep track of the invalid characters.
只需使用与您用来跟踪无效字符相同的布尔值即可。
As you mentioned 如你所说
The app uses Angularjs and Bootstrap 3.
该应用程序使用Angularjs和Bootstrap 3。
I suggest that you should use Boostrap tooltip. 我建议您使用Boostrap工具提示。 Use
$('#element').tooltip('show')
and $('#element').tooltip('hide')
with your flag to handle status of Tooltip. 将
$('#element').tooltip('show')
和$('#element').tooltip('hide')
与您的标志一起使用以处理工具提示的状态。
I don't know how your codes work, my idea seems like: 我不知道您的代码如何工作,我的想法似乎是:
HTML: HTML:
<input type=text (keypress)="eventHandler()"> // angular >= 2
<input type=text ng-keypress="eventHandler()"> // angular 1
Angular code: 角度代码:
eventHandler() {
if (isIllegal) {
$('#element').tooltip('show');
} else {
$('#element').tooltip('hide');
}
}
Something like that. 这样的事情。
Bootstrap Tooltip: https://getbootstrap.com/docs/3.3/javascript/#tooltips Bootstrap工具提示: https : //getbootstrap.com/docs/3.3/javascript/#tooltips
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.