做一个<input>看起来像普通的文本段落中的

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建议的样式。

---

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

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

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

<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>