做一個<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>