繁体   English   中英

将最后一个字符输入替换为内容可编辑div(尝试所有选项)

replace last character input into content editable div (tried all options)

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有一个由内容可编辑div定义的消息框。 用户可以在输入后编辑他们的消息,并且我有一个字符倒计时,但是当我剩下0个字符时,我一生都找不到合适的方法来删除最后一个字符或禁止最后一次按键

当前方法只是将光标发送回消息的开头,并且不会删除该字符。 iv尝试了Internet上几乎所有的建议,从连接到正则表达式再到子字符串。 我发现他们都没有工作。

我在下面向您显示的代码是我自己的代码,并且有相同的问题,在0时,光标只是返回到消息的开头,然后再次允许更多的字符,而没有限制允许的字符数...

任何人都可以在这里帮助我,并提出实现此简单目标的方法。 我会非常丰满。

这是我的代码。

$(function () {

    $(ebm).keydown(checklimitsBuyer);
    });

    function checklimitsBuyer(){

        var username = $(ebm).html();
        var nameReg = /^.{0,100}$/;


        var messlength = username.length;
        var amount=100;

            var leftlength=amount-messlength;
            var ebmname=document.getElementById('Bname'+varmessageid+'');


                if (messlength < amount) {
                $(ebmname).text('Chars Left'+leftlength);
                                }




                    if(!nameReg.test(username)) {
                    $(ebm).css('border', '1px dashed red');
                    //alert('Only 300 Characters Allowed');
                        var newStr = username.replace(/.$/,".")
                        $(ebm).text(newStr);
                    }  

                                if(nameReg.test(username)) {
                                $(ebm).css('border', '1px dashed #07f310');


                                } 
                            }
2 个回复

如果要限制用户可以输入的字符数,可以尝试如下操作:

 $(window).ready(()=>{ // our max number of characters let max = 10; // set the text of the div that allows the user to // keep track of how many characters he can still input $('#char-count').text(`remaining characters: ${max}`); $('#message').on('keypress input paste', function(e){ // the number of characters in our content editable div let charCount = $(this).text().length; if(charCount >= max){ // prevent the user from typing e.preventDefault(); } $('#char-count').text(`remaining characters: ${max - charCount}`); }); }); 
 #message { border: 1px dashed green; height: 100px; } #char-count { : margin-top: 10px; } 
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <div id="message" contenteditable="true"></div> <div id="char-count"></div> 

另外,这是一个工作示例 :)


编辑

  • 增加了对在达到限制时防止复制和粘贴的支持。

谢谢v.much

var ebm=document.getElementById('editBuyer'+varmessageid+'');



     $(ebm).on('keypress', function(e){

    var username = $(ebm).html();
    var nameReg = /^.{0,300}$/;

    if(!nameReg.test(username)) {
    $(ebm).css('border', '1px dashed red');
    e.preventDefault();

alert('Only 300 Characters Allowed');
                                }  

    if(nameReg.test(username)) {
    $(ebm).css('border', '1px dashed #07f310');
    } 
});
7 HTML/JS 不断替换内容可编辑 div 中的字符串

我想要一个 contenteditable div 来调用一个函数,该函数不断检查其内容并替换其中的模式(想想 Markdown)。 我的尝试导致光标不断将自身定位到 div 的开头,并且文本以倒序插入。 此外,即使(正则表达式样式替换)模式匹配,使用 HTML 标记(例如粗体)的替换也不会终止,而 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM