テキストエリアに行数+行数を制限する行数をプラスする行数

Question

jquery/html /またはcssを使用して以下の処理を行う方法を探しています。

私のテキスト領域は固定サイズで、1フォントサイズ/タイプで、次のことができるようにしたいと考えています。 18行

表示するには、ユーザが

ライン定義（種類の使用さえずり文字を含むアプローチが、表示する行と同じように）、これまで使用していたラインの数にラインの

• 制限数：私のプロジェクトのための行は、ユーザーがキーボードでenterキーを押して新しい行に行くとき、または自然に連続してintを入力することによってtextareaに新しい行/行が作成されたときです。私は基本的に固定サイズのテキストエリアを持っており、ユーザーはこれらの制限の外に出ることはできません。

Answer 1

問題のコードスニペットは表示されませんが、ソリューションの表示方法がわかります。 font.js javascriptライブラリでアルゴリズムを使用すると、テキスト内のすべてのキャラクタとテキストのピクセル単位の長さを取得できます。テキストボックスに一意のフォントを使用している場合は、行のピクセル数が新しい行に使用されている実際のピクセル数と等しいか、それよりも劣るたびに、行が完了したときを知ることができます。擬似コードでは、それは次のようになります。

してテキストエリア内の総画素数を割る

var textBoxLineInPixels = 300 //or getting the actual number through DOM; 

onChangeEvent { 
    var totalNumberOfPixels = getNumberOfPixelsFromElement(idToYourTextBox); 
    var numberOfLinesUsed = totalNumberOfPixels/textBoxLineInPixels; 
    update(idToYourNumberOfLinesContainer, numberOfLinesUsed); 
} 

ラインの画素数は、あなたのテキストエリアで使用される行の現在の数を与えます。

Answer 2

質問に対する答えは正確ではありませんが、入力時にテキスト領域の文字の数/カウントが制限されます。

不要な文字も削除します。

CSS：

<style> 
div.textarea-wrap{ 
    padding: 8px 0px; 
    border-radius: 3px; 
    postion:relative; 
    margin: 5px 0px 15px 0px; 
} 


textarea#styled_text_area { 
    width: 93.5%; 
    height: 120px; 
    font-size: 12px; 
    border: 1px solid slategrey; 
    border-radius: 3px; 
    padding: 8px 3%; 
    font-family: Tahoma, sans-serif; 
    background: #E3E9ED; 
} 


.remaining { 
    margin: 3px 0px; 
    line-height: 10px; 
} 

div.remaining p{ 
    color: lightslategrey; 
    float: right; 
    margin: 4px 3% 0px 0px; 
    float:right; 
} 

.remaining input{ 
    width:27px; 
    border: 0; 
    padding: 0; 
    border-radius: 0; 
    background: none; 
    color: lightslategrey; 
    float:right; 
    margin: 0; 
} 
</style> 

Javascriptを：

<script> 
function clean(el){ 
    var textfield = document.getElementById(el); 
    var regex = /[^a-z 0-9?!.,]/gi; 
    if(textfield.value.search(regex) > -1) { 
     textfield.value = textfield.value.replace(regex, ""); 
     } 
} 
// Text counter 
var maxAmount = <?php echo($message_input_size);?>; 
function textCounter(textField, showCountField) { 
    if (textField.value.length > maxAmount) { 
     textField.value = textField.value.substring(0, maxAmount); 
    } else { 
     showCountField.value = maxAmount - textField.value.length; 
    } 
} 
</script> 

HTML：

<div class="textarea-wrap"> 

    <textarea name="ta" id="styled_text_area" rows="6" placeholder="Type here..." onKeyDown="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');" onKeyUp="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');"></textarea> 


    <div class="remaining"> 
    <p>Characters Remaining</p> 
    <input readonly type="text" name="countDisplay" size="3" maxlength="3" value="500"><br><br> 
    </div> 
</div>