input输入框超出部分用省略号表示以及判断内容是否有超出（PC端）

最新推荐文章于 2022-10-28 10:52:35 发布

心刻

最新推荐文章于 2022-10-28 10:52:35 发布

阅读量3.9k

点赞数 1

分类专栏：错误集和Bug集文章标签：前端 javascript css

本文链接：https://blog.csdn.net/weixin_44679078/article/details/126067530

版权

错误集和Bug集专栏收录该内容

20 篇文章 1 订阅

订阅专栏

注意：下面代码是在PC的Web端跑的喔，移动端等其他环境我还没试过…

input输入框超出部分用省略号表示

这部分用css样式设置overflow: hidden和text-overflow: ellipsis实现就可以，找到其他答案是要设置width和white-space: nowrap，尝试了一下，这两个不设置也是可以实现。如果不行那就都加上试试。

下面的代码可以复制到菜鸟教程在线编辑器上运行看看。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.wrap {
		width: 300px;
		padding: 10px;
		border: 1px solid #ccc;
	}
	.inputClass {
		/* width:150px; */ 
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
</head>
<body>

<div class="wrap">
	<input class="inputClass" type="text" name="FirstName" value="MickeyMickeyMickeyMickeyMickey">
	<p>提示信息</p>
</div>

</body>
</html>

效果：
在这里插入图片描述

input输入框判断文本内容是否有超出

根据内容是否有超出，可以判断是否需要展示气泡提示框（比如Element的Tooltip组件）来提示文本
当然，鼠标点击进去就可以左右移动看到全部内容，但是需求嘛…你懂的

主要代码（ const isEllipsis = input.offsetWidth < input.scrollWidth ）：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.wrap {
		width: 300px;
		padding: 10px;
		border: 1px solid #ccc;
	}
	.inputClass {
		/* width:150px; */
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
<script type="text/javascript">
	function determineTheOverflow(input){
		var isEllipsis = input.offsetWidth < input.scrollWidth;
		input.title = isEllipsis? input.value : '';
	}
</script>
</head>
<body>

<div class="wrap">
	<input class="inputClass" type="text" name="FirstName" value="MickeyMickeyMickeyMickeyMickey" onblur="determineTheOverflow(this)">
	<p>提示信息</p>
</div>

</body>
</html>

效果：
在这里插入图片描述

input输入框超出省略部分鼠标按下会移位的问题

当在外层wrap边框元素的里面， “提示信息” 文本的右边，按下鼠标左键不放，然后往左上输入框的位置移动，接着往右移动，然后放掉鼠标左键，会出现 input 内容跟随的移动的问题。内容还是有省略且不会复原。如下图：

在这里插入图片描述

解决方法1：
不要留有空位；因为鼠标按下左键时的位置，是 p元素的内容区，是一个可选中文本的范围。把 p元素改用span，或者让内容区的宽度与文本内容的宽度刚好包裹，应该就不会有这种问题出现。

解决方法2：
监听mousedown事件，阻止默认行为，但是会导致被阻止的这个元素里面的文本内容无法选中。如果是一个icon图标，不需要有选中效果的话，可以使用这种方式。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.wrap {
		width: 300px;
		padding: 10px;
		border: 1px solid #ccc;
	}
	.inputClass {
		/* width:150px; */
		/* white-space: nowrap; */
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
<script type="text/javascript">
	function determineTheOverflow(input){
		var isEllipsis = input.offsetWidth < input.scrollWidth;
		input.title = isEllipsis? input.value : '';
	}
  function preventDefault(event) {
    event.preventDefault();
  }
</script>
</head>
<body>

<div class="wrap">
	<input class="inputClass" type="text" name="FirstName" value="MickeyMickeyMickeyMickeyMickey" onblur="determineTheOverflow(this)">
	<span onmousedown="preventDefault(event)">提示信息</span>
</div>

</body>
</html>