Question

在此处获取代码：

<p>Lorem ipsum <input type="text" value="algo" /> dolor sit ...</p>

示例：http://codepen.io/dbugger/pen/KrAmPx

如何在段落中使输入看起来像普通文本？我将其设置为display: inline，但宽度似乎仍然是固定的。

Answer 1

元素从浏览器继承某些默认值。您需要“重置”所有这些以使输入元素显示为周围文本：

p input {
  border: none;
  display: inline;
  font-family: inherit;
  font-size: inherit;
  padding: none;
  width: auto;
}

这就像单独使用CSS一样接近。如果你想要一个可变宽度，你将不得不求助于JS而不是CSS，因为调整元素的值超出了CSS的范围。事后修改元素，基于用户输入或由于即时效应引起的更改，是JS / jQuery的用途。

请注意，根据您使用的浏览器（并且由于未来浏览器可能会执行与当今实践完全不同的事情），此列表不一定是详尽无遗的。

在没有JS的情况下以干净的方式“伪造”此效果的唯一方法是使用具有contenteditable属性的元素，该元素（与输入元素不同）将用户输入存储在元素的内容中而不是它的价值。有关此技术的示例，请参阅this answer

虽然您不需要JS来获得效果，但您需要它来检索元素的内容。我能想象的唯一用途是，如果您提供的打印文档永远不需要以编程方式处理输入或存储它。

Answer 2

是的，可以通过使用CSS模仿样式并使用javascript自动调整文本的长度来实现此目的。

您可以@TheThirdMan建议最好地模仿样式。

将输入大小调整为其内容大小。

＆＃13;

$(function(){
  $('#hide').text($('#txt').val()).hide();
  $('#txt').width($('span').width());
}).on('input', function () {
  $('#hide').text($('#txt').val());
  $('#txt').width($('span').width());
});

＆＃13;

#txt,
#hide{
  font:inherit;
  margin:0;
  padding:0;
}
#txt{
  border:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Lorem ipsum 
  <span id="hide"></span><input id="txt" type="text" value="type here ...">
  egestas arcu.
</p>

＆＃13;

Answer 3

现在看来这是可能的。我找到了一篇帖子，描述了如何设置输入的样式，以便去除HTML表单样式。

Styling HTML forms

他们使用了以下CSS，对于我想做的事情，它运行得很好：

input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;
  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 240px;
  background: none;
}

对于原作者来说，这显然为时已晚，但我希望其他人将从中受益。

Answer 4

攻击这个问题的最好方法可能就是将文本字段设置为编辑文本字段，但使其不可编辑，这样您的文本字段和编辑文本字段看起来就会一样。

Answer 5

2020年更新。您可以部分地使用appearance属性使它看起来像普通文本，将其设置为none。不幸的是，除了使用js将其替换为值外，您无能为力地进行换行。 https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Answer 6

我希望这是您要寻找的答案，但是如果您想使输入字段看起来像普通段落（大概是这样，您就可以编辑该段落的某些文本），则是最好的方法要：

禁用输入边框

.maskedinput {
  border-style: none;
}

然后给它与父元素相同的样式，即文本颜色和背景颜色等，然后向您的CSS中添加一个:focus来更改背景颜色，以便在单击该字段时将突出显示。

使<input />看起来像段落中的普通文本

6 个答案: