使输入字段的宽度相对于其内容

Question

我想在每个帖子中显示帖子的网址，以便访问者可以轻松分享网址。这意味着放置url的输入字段的宽度应该相对于URL的宽度。

是否可以使输入字段的宽度相对于该输入字段的内容（值=“”中的文本）？

因此输入字段的宽度必须始终与字段中的文本相同。

<input readonly="" type="text" onClick="this.select();" value="http://www.website.com/category/sub-category/the-post-title.html" />

input{
padding: 5px 10px;
margin: 5px;
text-decoration: none;
border: 1px solid #000;
width:auto;

}

例如，我创建了一个jsfiddle：http://jsfiddle.net/GB35J/ 在那个小提琴中，您将看到输入字段很小，并且未显示该输入字段的整个内容。当我使用width：auto;时，宽度是小的，但是当我使用width：100％;时，输入字段的宽度是大的。

Answer 1

如果每次用户在文本字段中键入一个字符时都可以检测到事件，那么您可以创建一个函数，该函数将文本的长度作为参数，并在每次键入字符时调用它，因此它将相应调整文本字段的大小。