【JavaScript】input提示弹出框

CHERISH.zz

已于 2023-10-26 12:01:37 修改

阅读量1.8k

点赞数

分类专栏： javascript 文章标签： javascript 前端 css

于 2023-01-09 12:02:12 首次发布

本文链接：https://blog.csdn.net/leader_li/article/details/128610353

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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>