如何使输入弹出并显示整个内容

Question

我有多个输入，其中一些输入太小，无法显示整个文本(无法更改)。有没有一种方法可以在悬停时显示输入的全部内容，而不会破坏布局的其余部分？我举了一个例子。我正在努力让输入弹出，并在不破坏设计的情况下领先于其他输入。

https://jsfiddle.net/14e37gj0/

我不太擅长css。我试过这样的东西。

input {
width: 10%;
}
input:hover {
width: 100%;
}

向致以最良好的问候

Answer 1

我想到的第一种方法是使用Flexbox

因此，首先，您需要用类似的包装器包装所有的input标签

<div class="wrapper">
<input type="text" value="This text is long and I want to see the whole input when hovering" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>

在CSS中添加以下规则

.wrapper {
display: flex;
}
input:hover {
flex: 1 1 auto;
}

flex: 1 1 auto负责填充剩余间隙，直到行结束。

事情仍然可以更高效，但我试图让它尽可能简单，我建议你更多地了解CSSFlexbox。

Answer 2

将input包裹在flexboxdiv:中

.row{
display:flex;
width:100%;
}
input {
width: 10%;
}
input:hover {
width: 100%;
}

<div class="row">
<input type="text" value="This text is long and I want to see the whole input when hovering"/>
<input type="text" />
<input type="text" />
<input type="text" />
</div>

Answer 3

您可以使用javascript来创建mouseover和mouseout事件来创建一个绝对[/em>定位的元素，然后将event.target的值传递到其内容中。使用insertAdjacentHTML将其添加到mouseover上，使用.remove()将其删除到mouseout上。检查输入clientWidth和输入scrollWidth，查看是否有溢出，如果有，请插入以e.target.value为内容的类为.content的AdjacentHTML span标记。

请参阅下面的代码，并对每行上面的代码进行完整解释：

// get nodelist of all inputs
let inputs = document.querySelectorAll('input')
// function for the event listeners, pass the event into it as poarameter => e
function showAllContent(e) {
// the following positions will be used to position our 
// absolutely positioned span tag below the event.target element
// get the top position of the event target => "input" being hovered
let top = e.target.getBoundingClientRect().top
// get the left position of the event target => "input" being hovered
let left = e.target.getBoundingClientRect().left  
// get the height of the event target => "input" being hovered
let height = e.target.getBoundingClientRect().height

/* set a root variable for e.target top and left to be used in CSS to style
the position of the absolutely positioned span tag
NOTE: if you change the inputs layout of have elements below, 
you will likely have to play with these settings a bit */
document.documentElement.style.setProperty('--e-target-top', `${top + height}px`)
document.documentElement.style.setProperty('--e-target-left', `${left}px`)
// set variable for event target value
let allContent = e.target.value.trim()
// set variable to show all of event.target.value
let span = `<span class="content">${allContent}</span>`
// conditional to make sure event.target is not null and also
// make sure its scrollWidth is greater than its clientWidth
if (allContent && e.target.scrollWidth > e.target.clientWidth) {
// check type of event is mouseover
if (e.type === 'mouseover') {
// insert the span tag into the DOM
e.target.insertAdjacentHTML('afterend', span)         
}
// check type of event is mouseout and .content is set
if (e.type === 'mouseout' && document.querySelector('.content')) {
// remove the element from DOM
document.querySelector('.content').remove()
}
}
}
// iterate over the input nodeList
inputs.forEach(input => {
// event listener for mouseover
input.addEventListener('mouseover', showAllContent)
// event listener for mouseout
input.addEventListener('mouseout', showAllContent)
})

:root {
/* this will set our top position in the .content class it is being sent  
from JS using style.setProperty('--e-target-top', `${top + height}px`) */
--e-target-top: 0;
/* this will set our left position in the .content class it is being sent  
from JS using style.setProperty('--e-target-left', `${left}px`) */
--e-target-left: 0;
}
input {
width: 10%;
}
.content {
display: inline-block;
position: absolute;
left: var(--e-target-left);
top: var(--e-target-top);
width: auto;
height: auto;
background: #ccc;
border-radius: .5rem;
padding: .5rem;
margin-top: 2px;
}

<div id="parent">
<input type="text" value="This text is long and I want to see the whole input when hovering" />
<input type="text" value="small text" />
<input type="text" value="this inputs scrollWidth will overflow the clientWidth" />
<input type="text" />
</div>