首页>Program>source

我有一个文本区域,如果该区域为空,则其边框将被涂成红色。 我在文本区域上安装了表情符号选择器,它添加了一个div来容纳选择器。

自动创建的div恰好位于文本区域之后,而我尝试实现的目的是在用户键入内容后立即删除红色边框。

我拥有的脚本可以很好地用于文本区域本身,但是不能将其从保存表情符号选择器的div中删除

This is what I have

<div class="form-group">
<p class="emoji-picker-container"></p>
<textarea name="title" id="title" class="form-control mandatory" rows="3" placeholder="Type your answer here" data-emojiable="converted" data-emoji-input="unicode" style="height: 100px; display: none;" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="original-input"></textarea>
<div class="emoji-wysiwyg-editor form-control mandatory" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="input" placeholder="Type your answer here" contenteditable="true" style="height: 100px;" spellcheck="false"></div>
</div>

and this is the jQuery

$(document).ready(function() {
        checkInput();
    })
    $('.mandatory').on('input change',checkInput)
    function checkInput()
    {
        $('.mandatory').each(function() {
            if ($(this).val() == '') {
                $(this).addClass('invalid');
                
                } else {
                    $(this).next().removeClass("invalid");
                    
                $(this).removeClass('invalid')}
        })
    }

我已经尝试了所有我能想到的.... next()prev()nextAll() ... 也曾尝试使用 $('#emoji-wysiwyg-editor').next() ,它会删除它,但是如果我有一个以上带有表情符号选择器的文本区域,它将在所有地方将其删除

此外,尝试在此处进行搜索,但此处的想法也无效。 下一步是jquery,但这不起作用

每个文本区域和所创建的div唯一的一件事是 data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" 也许可以用作选择器,但不知道如何处理。

This is the emojipicker http://onesignal.github.io/emoji-picker/demo/< / p>

这是个好人 显示问题 https://jsfiddle.net/largan/3d7bkwg9/11/

fiddle
最新回答
  • 27天前
    1 #

    问题似乎是您正在尝试使用 .val() 在div上,但必须是 .text()

    您可以使用 var $val = $(this).val() || $(this).text() ; 它将检测是否将是 .val().text()

    Demo

    $(document).ready(function() {
      checkInput();
    })
    $('.mandatory').on('input change', checkInput)
    function checkInput() {
      $('.mandatory').each(function() {
        var $val = $(this).val() || $(this).text()
        if ($val == '') {
          $(this).addClass('invalid');
        } else {
          $(this).next().removeClass("invalid");
          $(this).removeClass('invalid')
        }
      })
    }
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="form-group">
    <p class="lead emoji-picker-container"></p>
    <textarea name="title" id="title" class="form-control mandatory" rows="3" placeholder="Type your answer here" data-emojiable="converted" data-emoji-input="unicode" style="height: 100px; display: none;" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="original-input"></textarea>
    <div class="emoji-wysiwyg-editor form-control mandatory" data-id="e4914124-a85d-4ff4-96d7-9bfd0fd5a1df" data-type="input" placeholder="Type your answer here" contenteditable="true" style="height: 100px;" spellcheck="false"></div>
    
    </div>
    

  • 27天前
    2 #

    因为您遍历了所有 mandatory 所以我认为不需要 .next() ,如下所示:

    function checkInput(){
        $('.mandatory').each(function() {
            $(this).toggleClass('invalid',($(this).val() == ''));
        })
    }
    

    参考:.toggleClass()(添加的版本:运行此代码需要1.3或更高版本)

  • VBA在Excel中删除行
  • javascript:按唯一值对将对象数组分组