根据textarea

Question

我试图计算一个价格，这取决于您在textarea中使用的行数。这是我到目前为止所提出的。唯一的问题是它不会计算，我想我已经看了很多或者什么。

让我先解释一下，首先是som textads。 有一个flatfee至少有2行，然后每行新增10行，最多10行。

var flatFee = '70.00';
var perRow = '10.00';

function rowCount(area, maxlength) {
  
    //var area = document.getElementById("textarea-1")
    // trim trailing return char if exists
var text = area.value.replace(/\s+$/g, "");
var split = text.split("\n");
if (split.length > maxlength) {
  split = split.slice(0, maxlength);
  area.value = split.join('\n');
  alert("You can not enter more than " + maxlength.toString() + " lines");
}
return false;
}

var div = $('span.rowCount');

jQuery('textarea#textarea-1').on('input', function($) {

  var count = rowCount(this.value);
  div.html(count.rows);

  /*var additionalFees = perRow*count.rows;*/

  if (count.rows > 2) {
    var additionalFees = perRow * (count.rows - 2);
  }

  var total = parseFloat(flatFee) + parseFloat(additionalFees);

  $('span.total').html(parseFloat(total.toString()).toFixed(2));
  /*var total = $('span.total');*/

  console.log(total);
});

<textarea cols="32" rows="10" maxlenght="320" class="form-control" name="textarea-1" id="textarea-1" placeholder="Type or paste your prompt here."></textarea>
<p>You have <span class="rowCount">0</span> rows.Total <span class="total">0</p>

Answer 1

https://jsfiddle.net/5mcbt8ua/4/

HTML

Flat Rate / First 2 rows: 70<BR>
Additional Rows: 10 per row
<div id="compute" contenteditable="true" style="border:1px solid #ccc;">

</div>
Total Price: <font id="total">0</font>
<BR>
<font id="msg"></font>

的jQuery

var flatFee = 70;
var perRow = 10;
$('#compute').keypress(function(){
    $("#msg").html('Press enter to compute');
    var count = $(this).find('div').length;
  var total = flatFee;
  if(count > 1)
    {
    total = flatFee + (count * 10) - 10;
  }
  $("#total").html(total);
});

Answer 2

稍微修改了你的功能。现在有效

＆＃13;

＆＃13;

var flatFee = '70.00';
var perRow = '10.00';

function rowCount(area, maxlength) {

  //var area = document.getElementById("textarea-1")
  // trim trailing return char if exists
  var text = area.replace(/\s+$/g, "");
  var split = text.split("\n");
  if (split.length > maxlength) {
    split = split.slice(0, maxlength);
    area.value = split.join('\n');
    alert("You can not enter more than " + maxlength.toString() + " lines");
  }
  return {rows:split.length};
}

var div = $('span.rowCount');

jQuery('textarea#textarea-1').on('input', function($) {

  var count = rowCount(this.value);
  div.html(count.rows);

  /*var additionalFees = perRow*count.rows;*/
var additionalFees=0;
  if (count.rows > 2) {
    additionalFees = perRow * (count.rows - 2);
  } 

  var total = parseFloat(flatFee) + parseFloat(additionalFees);

  //$('span.total').html(total.toString().toFixed(2));
  /*var total = $('span.total');*/

  console.log(total);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea cols="32" rows="10" maxlenght="320" class="form-control" name="textarea-1" id="textarea-1" placeholder="Type or paste your prompt here."></textarea>
<p>You have <span class="rowCount">0</span> rows.Total <span class="total">0</span></p>

＆＃13;

＆＃13;

＆＃13;