如果输入框超过字符限制，则显示跨度标签消息

Posted 2023-03-03

【中文标题】如果输入框超过字符限制，则显示跨度标签消息

【英文标题】：If input box goes over character limit, have span tag message display

【发布时间】：2018-04-18 20:38:05

【问题描述】：

我有一个标题输入框，用户可以输入 3 个字符。在用户达到 3 个字符的限制并且不再能够输入后，我希望下面列出的 span 消息显示为红色，“标题必须少于 3 个字符。”

通过 CoffeeScript 函数，我正在尝试添加一个更改类，该类应在下面以红色显示 span 消息；但是它不起作用。我为这个问题提供了一个小提琴。此外，我还显示了我希望我的函数显示的图像。如果有人可以提供帮助，我将不胜感激！

Fiddle

<label htmlFor="request[title]">Headline</label>
        <input name="request[title]" id="headline_input" onChange= "headline_input_max" maxLength="3" type="text"
               placeholder="Give your request a title"
               required />
        <span id="title_over_limit_text">Headline must be under 3 characters.</span>

 $ ->
  $('#headline_input').change ->
    if $(this).val().length > 3
        $('#title_over_limit_text').addClass('title_over_limit_text_display')


#title_over_limit_text 
  display: none;


.title_over_limit_text_display 
  color: red;

【问题讨论】：

您的headline_input_max 函数在哪里？另外，您需要显示您的消息，.title_over_limit_text_display color: red; display: inline;

我忘了把那条线拿出来。我尝试创建一个“headline_input_max”函数，但它仍然没有显示“标题必须小于 3 个字符”。跨度消息。

【参考方案1】：

在下面执行此操作：如果它不起作用，请提醒我注意。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 <input name="requesttitle" id="headline_input" onkeyup="seee()" type="text" placeholder="Give your request a title" required />
        <span id="title_over_limit_text" style="display:none;">Headline must be under 3 characters.</span>

       <script>
        function seee()
   var textval = $("#headline_input").val().length;
  //  alert (textval); to see count of the text number
    if (textval > 3)
      $("#title_over_limit_text").show();
      //if maybe you want to run ajax request here you can do that.
      return false;
      else 
     $("#title_over_limit_text").hide();
     return false;
   
   
       </script> 

#title_over_limit_text 
  display: none;


.title_over_limit_text_display 
  color: red;

【讨论】：

嗨@Shasha，很遗憾这没有用。我试图避免使用任何内联 javascript。我想要一个单独的 CoffeeScript 函数来解决这个问题。如果您有任何其他想法，请告诉我！

@MissyBur Cofeescripts 是长代码，但让我重新编辑我的代码应该可以工作。

@MissyBur 它不起作用的另一个原因是因为你有 maxlength 所以它不能超过 3 个字符，而且我的脚本只能用于超过 3 个字符，我的意思是如果 (textval > 3) else 在我的代码区。​​

好点。我是否应该从 HTML 中取出“maxLength = 3”，以便在输入框中输入 3 个字符后，CoffeeScript 函数就会知道？

如果你能帮我解决这个问题，我肯定会支持你！！我是 CoffeeScript 新手，所以这非常具有挑战性。感谢您的帮助！