添加新行不会使用新字符计数器消息创建新跨度

Question

每个描述字段都有要显示的字符数。在每一新行之后，新的描述字段应该有自己的字符计数器。但是，如何设置不同的SpanIDs并在各自的SpanIds中显示

<div class="row">
                                 <div class="col-sm-5" style="padding-right: 7px;padding-left: 26px;padding-bottom: 20px;">
                                 <span style="padding-bottom: 20px;">Description</span>
                                 <div class = "row" style="padding-bottom:10px;"> </div>
                                 <div style="display: inline-flex;width: 150%;">
                                    <input type="text" class="form-control controlheight claimdesc" onkeyup="ReasonCodeDescCounter(this.id)" id="txt_complaint_breakdowndesc" maxlength="85">
                                    <span style="padding-left: 5%;line-height: 25px;" class="mandatoryinput"></span>            
                                 </div>
                                 <div class="validationError">
                                    <span id="breakdowndescvalid" class="important">Mandatory</span>
                                    <span id="reasoncodecharactersLeft" class="important"></span>
                                 </div>

$(".newadd").append("<div class=\"additionalrow\" id=\"additionalrow"+txti+"\"><div class='col-sm-5 col-xs-5' style='margin-top:10px;'><div style=\"padding-left: 5%;display: inline-flex;width: 150%;\"><input type='text' class='form-control controlheight claimdesc' maxlength='85' id='txt_complaint_breakdowndesc" + txti + "' onkeyup='javascript:return ReasonCodeDescCounter(this.id)'><span style=\"padding-left: 3%;line-height: 25px;\" class=\"mandatoryinput\"></span></div><div class=\"validationError\"><span id=\"breakdowndesc"+ txti +"valid\" class=\"important\">Mandatory</span><span style=\"display: block;\" id='reasoncodecharactersLeft"+ txti + "' class=\"important\" ></span></div></div>

function ReasonCodeDescCounter(id){
    var x = document.getElementById(id).value;
    var lastreasoncodedesccharactersLeft;
    lastreasoncodedesccharactersLeft=0;

    var lengthCount = x.length;              
    var lengthdata = x;     
    var reasoncodecharactersLeft;
    if (lengthCount > 85) {
        id.value = id.value.substring(0, lengthdata-1);
        reasoncodecharactersLeft = lastreasoncodedesccharactersLeft;                   
    }
    else {                   
        reasoncodecharactersLeft = 85 - lengthCount;   
        lastreasoncodedesccharactersLeft=   reasoncodecharactersLeft;
    }
    
    $("#reasoncodecharactersLeft").css('display', 'block');
    $("#reasoncodecharactersLeft").text(reasoncodecharactersLeft + ' Characters left');          
}
```[Missing Span after new description field in new row][1]


  [1]: https://i.stack.imgur.com/UZ9S6.png

Answer 1

您可以在您的函数中传递 this，其中 this 指的是发生 keyup 事件的输入框，然后使用它您可以获得输入的值，然后在 span 中显示所需的消息。

演示代码 :

var txti = 2;
//added left class
$(".newadd").append("<div class=\"additionalrow\" id=\"additionalrow" + txti + "\"><div class='col-sm-5 col-xs-5' style='margin-top:10px;'><div style=\"padding-left: 5%;display: inline-flex;width: 150%;\"><input type='text' class='form-control controlheight claimdesc' maxlength='85' id='txt_complaint_breakdowndesc" + txti + "' onkeyup='javascript:return ReasonCodeDescCounter(this)'><span style=\"padding-left: 3%;line-height: 25px;\" class=\"mandatoryinput\"></span></div><div class=\"validationError\"><span id=\"breakdowndesc" + txti + "valid\" class=\"important\">Mandatory</span><span style=\"display: block;\" id='reasoncodecharactersLeft" + txti + "' class=\"important left\" ></span></div></div>")


function ReasonCodeDescCounter(el) {
  var x = $(el).val() //value of input
  var lastreasoncodedesccharactersLeft;
  lastreasoncodedesccharactersLeft = 0;

  var lengthCount = x.length;
  var lengthdata = x;
  var reasoncodecharactersLeft;
  if (lengthCount > 85) {
    $(el).val(x.substring(0, lengthdata - 1));
    reasoncodecharactersLeft = lastreasoncodedesccharactersLeft;
  } else {
    reasoncodecharactersLeft = 85 - lengthCount;
    lastreasoncodedesccharactersLeft = reasoncodecharactersLeft;
  }
  //get span tag
  $(el).closest(".col-sm-5").find(".left").css('display', 'block');
  $(el).closest(".col-sm-5").find(".left").text(reasoncodecharactersLeft + ' Characters left');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-5" style="padding-right: 7px;padding-left: 26px;padding-bottom: 20px;">
    <span style="padding-bottom: 20px;">Description</span>
    <div class="row" style="padding-bottom:10px;"> </div>
    <div style="display: inline-flex;width: 150%;">
      <!--pass `this` as well-->
      <input type="text" class="form-control controlheight claimdesc" onkeyup="ReasonCodeDescCounter(this)" id="txt_complaint_breakdowndesc" maxlength="85">
      <span style="padding-left: 5%;line-height: 25px;" class="mandatoryinput"></span>
    </div>
    <div class="validationError">
      <span id="breakdowndescvalid" class="important">Mandatory</span>
      <!--added left classs-->
      <span id="reasoncodecharactersLeft" class="important left"></span>
    </div>

  </div>

  <div class="newadd"></div>

添加新行不会使用新字符计数器消息创建新跨度

Adding new row does not create new span with new character counter message

html

javascript

jquery

sharepoint-2013