2016-07-22 10 views
1

読み取り専用入力要素の値が切り捨てられています。フォントタイプやフォントサイズを変更せずにこれを修正する方法はありますか? https://jsfiddle.net/hockchailim/tkg7a4c8/html入力後続テキストの読み取り専用カット

<style> 
input[readonly] { 
    border: none; 
    font-size: .85em; 
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; 
    width: auto; 
} 
</style> 
<input readonly="readonly" type="text" value="[email protected]"> 
+0

変更入力の大きさ100%。あなたの唯一の選択肢は、フォントサイズまたは入力サイズを変更することです。私はまた、その値に基づいて入力の幅を設定しようとしないことをお勧めします、それはあらゆる種類の奇妙な状況につながる可能性があります。 – hungerstar

答えて

1

変化幅

$(document).ready(function() { 
 
    var count = $("#readonly").val().length; 
 
    $("#readonly").css("width","calc("+ count +" * 0.85em)"); 
 
});
input[readonly] { 
 
    background-color: transparent; 
 
    border: none; 
 
    font-size: .85em; 
 
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; 
 
    margin: 3px 0 3px 0; 
 
    padding: 2px; 
 
    
 
}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<input id="readonly" readonly="readonly" type="text" value="[email protected]">

+0

なので、(tdのように)自動拡張する方法はありませんか? –

+0

幅を削除し、文字数に応じて計算するjQueryを追加すると、この方法で自動的に展開されます。これが役に立ちます:) –

0

うーん...あなたは、フォントの種類/サイズを変更したくありませんか?入力幅はどうですか?自動幅の代わりにwidth:250pxを取得すると、問題が修正されます。

関連する問題