Question

我正面临一个非常意外的问题，在此之前我不能期望这种类型的问题也会发生...我在单页中写了文本框的单词限制器代码，它可以100％很好地工作，单词限制器也可以剩余的单词也显示为名为“ remaining6”的标签...当我在母版的子页面中粘贴相同的代码时，单词限制器会起作用，但是剩余的单词不会显示：

<input type="text" id="TextBox5"  placeholder="latest" runat="server"  onkeyup="countChar(this)" /> 
<h5 >Characters Left <span id="remaining6">20</span></h5>
    <script type="text/javascript" >
        function countChar(val) {
            var len = val.value.length;

            if (len >= 10) {
                val.value = val.value.substring(0, 10);                                       
            } 
           else
              {                   
                $('.numbersofChart').text(10 - len);
                alert("before");
                var textEntered = document.getElementById('TextBox5').value;
                alert("after");
                var msg = document.getElementById('remaining6');
                var counter = (10 - (textEntered.length));
                msg.textContent = counter;

            }
        };
    </script>

当我通过Alert调试此代码时，将显示alert（“ before”）而不显示alert（“ after”）。这表示以下行中的错误：

  var textEntered = document.getElementById('TextBox5').value;

我不知道为什么代码不能从这一行执行...记住当我在单个页面（没有master）中运行相同代码然后运行良好时...将代码粘贴到master的子页面中时会发生问题。 ...我在子页中正确包含了库....我如何解决此问题？

Answer 1

这是一个单词限制示例：

//<![CDATA[
/* js/external.js */
var doc, bod, dE, I, wordLimit; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; dE = doc.documentElement;
I = function(id){
  return doc.getElementById(id);
}
wordLimit = function(context, remainElement, limit){
  var s = context.value.split(/[ ]+/), max = limit || 20;
  var n = max-s.length;
  if(n < 1)n = 0;
  remainElement.innerHTML = n;
  if(n === 0){
    context.value = s.splice(0, max).join(' ');
  }
}
var remain = I('remain');
I('textBox').onkeyup = function(){
  wordLimit(this, remain);
}
}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%;
}
body{
  background:#ccc;
}
#content{
  padding:7px 5px;
}
#textBox{
  width:100%; height:38px; background:#fff; color:#000; font:22px Tahoma, Geneva, sans-serif; padding:5px;
}
h5{
  text-align:center;
}
h5>span{
  color:#a00;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
    <title>Word Limiter</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script type='text/javascript' src='js/external.js'></script>
  </head>
<body>
  <div id='content'>
    <input id='textBox' type='text' />
    <h5>Words Left <span id='remain'>20</span></h5>
  </div>
</body>
</html>

在母版的子页面中编写代码时，文本框的单词限制器无法正常工作

1 个答案: