【JavaScript】input提示弹出框

一、先设计出提示框的样式，给出以下注意点：

width: max-content; //提示框宽度可跟随文字的数量自动变化
我尝试过使用 width: fit-content; 在Chrome浏览器中也可以生效，但是使用Firefox（火狐）浏览器却不生效。
top: -32px; //我设定的提示框出现在input框的上方。
bottom 是出现在下方，left 出现在左侧，right 出现在右侧。
border-color: #082666 transparent transparent transparent; //提示框箭头
遵循上右下左原则，箭头与位置相反。#082666在第一位是下箭头，在第二位是左箭头，在第三位是右箭头，在第四位是上箭头。

<!-- 动态提示框样式 -->
<style>.defaultTipBox{display: inline-block;width: max-content;height: 22px;line-height: 22px;padding: 0 5px;background-color: #4585b1;border-radius: 5px;border: 1px solid #082666;position: absolute;left: 50%;/* bottom: -32px; */top: -32px;transform: translateX(-50%);text-align: center;font-size: 12px;color: #fff;z-index: 99999;}.defaultTipBox::before{content: '';display: block;border: 8px solid #082666;/* border-color: transparent transparent #082666 transparent; */border-color: #082666 transparent transparent transparent;position: absolute;left: 50%;/* bottom: 23px; */top: 23px;transform: translateX(-50%);}.defaultTipBox::after{content: '';display: block;border: 8px solid #4585b1;/* border-color: transparent transparent #4585b1 transparent; */border-color: #4585b1 transparent transparent transparent;position: absolute;left: 50%;/* bottom: 22px; */top: 22px;transform: translateX(-50%);z-index: 1;}
</style>

二、选择需要提示框的input，给id名或class名

按照以下input框（此处用的id名）为例，由于会有多个提示框，以表格的方式体现：

<!-- 此处为了方便查看，该body标签可删除 -->
<body style="margin-top: 100px;"><table><tr><th><font color="#FF0000">问题编号*</font></th><td><input name="WTBH" id="WTBH" type="text" /></td></tr></table>
</body>

三、给input框加入鼠标经过、离开事件

调用该方法后，效果图如下：

代码如下：

<script>// 动态提示框方法// defaultTipContent( parameterName, defaultVaule)// parameterName ： 参数名称（可以是类名[.className]也可以是ID名称[#idName]）// defaultVaule ： 默认值（提示框的内容）function defaultTipContent( parameterName, defaultVaule){var ipt = '';if( document.querySelector(parameterName) == null){// console.log('页面内没有该参数名：'+ parameterName);return;}else{ipt = document.querySelector(parameterName);var parent = ipt.parentElement;var span = document.createElement('span');parent.addEventListener('mouseover', function(){parent.appendChild(span);parent.style.position = 'relative'span.className = 'defaultTipBox';span.innerHTML = defaultVaule;})parent.addEventListener('mouseleave', function(){// 如果不加if条件，可能会导致其他标签被移除if(parent.style.position == 'relative'){parent.removeChild(parent.children[parent.children.length-1]);parent.style.position = 'static'}})}}//调用defaultTipContent方法defaultTipContent( '#WTBH', '系统自动生成，无需更改' );
</script>

若只需要应用于部分提示框，以上步骤即可完成。

四、若需要应用的提示框过多，想要方便后期维护，可以把所有提示框信息存在一个数据表里，根据不同页面名称挑选不同的提示框

此处用了3个必要字段：
SJXMC：对应的页面名称。
SJXZD：对应的ID名或class名(此处用的ID名)
SJXValue：提示框内容

<script>
// （不同页面挑选自己页面所需的弹出框）调用动态提示框方法<!-- defaultTipFun( param ) --><!-- param ： 页面名称 -->function defaultTipFun(param){$.ajax({//数据源地址（用于存储所有的弹出框信息）url: '${pageContext.request.contextPath}/${systemName}${resourceURL}/viewdata?datasourceId=8ac86aa184a5f05a0184a963f87c0008',dataType: "JSON",type: "GET",data: {SJXMC: param,  //数据项名称（对应该页面名称）},success: function(result) {// console.log(result.rows);var test = result.rows;// 在所有弹出框信息中挑选该页面所需要for(var i=0; i<test.length; i++){// SJXZD：input的ID名(此处用的"#WTBH")  SJXValue：提示框的默认值(此处用的"系统自动生成，无需更改")defaultTipContent('#'+test[i].SJXZD, test[i].SJXValue);}},error: function(e){console.log(e);}});}// 调用该方法可注释掉 defaultTipContent() 方法defaultTipFun('问题管理页面'); //SJXMC的值为"问题管理页面"
</script>

【JavaScript】input提示弹出框相关推荐

JavaScript三种弹出框（alert，confirm和prompt）
JavaScript三种弹出框(alert,confirm和prompt)用法举例 http://blog.csdn.net/lucky51222/article/details/45604681 我 ...
html alter自动弹出,javascript封装alert()弹出框
由于各个浏览器之间的差异,弹出框不一样,这有影响页面的布局,所以自己就用原声js封装了一个alert弹出框,希望对有需求的有所帮助... ` alert function ok() { alert(' ...
php右小角弹出框,HTML+Javascript实现右下角弹出框
效果视图: 分享代码:HTML> 右下角广告弹出框 display: block;border-radius: 4px;box-shadow: none;z-index: 999;padding ...
JavaScript三种弹出框（alert，confirm和prompt）用法举例
目录 1. 警告(alert) 2. 确认(confirm) 3. 提问(prompt) 1. 警告(alert) 在访问网站的时候,你遇到过这样的情况吗?"咚"的一声,一个小 ...
Bootstrap实现弹出框和提示框效果代码
一.Bootstrap弹出框使用过JQuery UI应该知道,它里面有一个dialog的弹出框组件,功能也很丰富.与jQuery UI的dialog类似,Bootstrap里面也内置了弹出框组件.打 ...
Bootstrap：弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
弹出框和提示框效果以及代码展示
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
Java程序员从笨鸟到菜鸟之（三十）javascript弹出框、事件、对象化编程
一:弹出框 JavaScript中有三种弹出框:警告(alert).确认(confirm)以及提问(prompt). 1.警告(alert) 在访问网站的时候,你遇到"咚"的一声 ...

【JavaScript】input提示弹出框

一、先设计出提示框的样式，给出以下注意点：

二、选择需要提示框的input，给id名或class名

三、给input框加入鼠标经过、离开事件

四、若需要应用的提示框过多，想要方便后期维护，可以把所有提示框信息存在一个数据表里，根据不同页面名称挑选不同的提示框

【JavaScript】input提示弹出框相关推荐

最新文章

热门文章