记录textarea文本域中实现回车发送遇到的问题

前言:

1、如何实现回车发送的功能

2、回车发送但是出现了换行

3、修改了回车不换行时textarea输入出现问题,只能输入中文,不可以输入英文和汉字

4、如何实现限制输入内容类型

一、回车发送功能实现

回车实现发送在于 监听键盘事件,当按键是回车时就再触发一次发送事件

  $("#sendMess").click(function (e) { 

    var question = $(".textareaCon").val()
    console.log("文本值1",question)
    if(question.trim()){
      qaSearch(question) 
    }
    // 清空输入框
    $(".textareaCon").val("")
  });
  // 回车触发问答
  $(".textareaCon").keydown(function (e) { 
    if(e.keyCode == 13){ // 回车键的keyCode 是 13
      $("#sendMess").trigger("click");
    }
  });

二、实现 按下回车发送但不出现换行

阻止键盘的默认事件即可 e.preventDefault();

 // 回车触发问答
  $(".textareaCon").keydown(function (e) { 
    // console.log(e)
    if(e.keyCode == 13){
      e.preventDefault();
      $("#sendMess").trigger("click");
    }
  });

三、修改了回车不换行时textarea输入出现问题,只能输入中文,不可以输入英文和汉字

在我的项目中出现这个问题时我以为是写了样式什么的对文本框造成影响,但是最后发现是我的  阻止键盘的默认事件 代码的书写位置原因

 // 回车触发问答
  $(".textareaCon").keydown(function (e) { 
    // 错误位置 ,将阻止默认事件放在这里会导致键盘时间失灵,输入不上英文数字
       e.preventDefault();
    if(e.keyCode == 13){
           // 正确位置 当按键为回车时才阻止默认事件
      e.preventDefault();
      $("#sendMess").trigger("click");
    }
  });

四、如何实现限制输入内容类型

1、只能输入英文数字和逗号 正则: $(this).val(nval.replace(/[^\d,]/g,''));

 $(".textareaCon").on("input", function(e){
        var value= $(this).val();
        $(this).val(value.replace(/[^\d,]/g,''));
    })

你可能感兴趣的:(javascript,开发语言,ecmascript)