当前位置：网站首页>input输入框超出部分用省略号表示以及判断内容是否有超出（PC端）

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

2022-08-10 23:56:00 【心刻】

注意：下面代码是在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>