zoukankan      html  css  js  c++  java
  • 工作记录(JS向textarea添加固定内容、通过固定字符将字符串分割为数组)

    第一个是在 textarea 输入框中添加固定的内容。

    代码如下:

    <textarea id="text" cols="30" rows="10"></textarea>
    <br>
    <button id="btn">添加公司</button>
    var textareaIndex = 0;
    $("#text").on('keydown',function(e){
      textareaIndex = this.selectionStart+1;
      if(e.keyCode == 8){
        var starText,endText,replaceText;
        var text = $(this).val();
        var selectionIndex = this.selectionStart-1;
        if(text[selectionIndex]==']'){
          var result = rep(text,selectionIndex);
          $(this).val(result.text);
          this.selectionStart = this.selectionEnd = result.index;
          return false;
        }
      }
    })
    
    $("#text").click(function(){
      textareaIndex = this.selectionStart; // 获取光标所在下标
    })
    
    function rep(str,index){
      var i = index,k='no';
      while(i>0){
        if(str[--i]=='['){
          k = i;
          break;
        }
      }
      if(k=='no')k=index
      return {text:str.substring(0,k)+str.substring(index+1),index:k}
    }
    
    $('#btn').click(function(){
      var text = $("#text").val();
      var str = text.substring(0,textareaIndex);
      var texts = str + '[公司名称]' + text.substring(textareaIndex,text.length);
      $("#text").val(texts);
    })

    效果在此就不展示了。(不过到最后并不能满足大部分需求所以并没有使用这种方法,使用的是 HTML 5 的新属性 contenteditable)。

    第二个是研究聊天发表情,是为了实现微信端和小程序端的互相通信,过程中碰到种种困难,尤其是小程序端,所以想到将带表情的内容改变成一个数组形式发送。

    代码如下:

    var str = '你好,#微笑;1。加油兄弟#握手;#的哈哈但是.#所属;';
    
    function f(str){
      var arr = [],tmp = '';
      for(var i=0,l=str.length;i<l;i++){
        if(str[i]=='#'&&tmp){
          arr.push(tmp);
          tmp = '';
        }
        tmp+=str[i];
        if(str[i]==';'&&tmp[0]=='#'){
          arr.push(tmp);
          tmp = '';
        }
      }
      if(tmp)arr.push(tmp)
      return arr;
    }
    
    var data = f(str);
    
    console.log(data)
    // ["你好,", "#微笑;", "1。加油兄弟", "#握手;", "#的哈哈但是."]

    允悲,这种方法是可以实现想要的效果的,只不过有点麻烦,尤其是小程序端,不过最后并没有使用这种方法(原因是发现现在的输入法自带表情,不仅表情全而且无需做任何处理)

  • 相关阅读:
    复选框与全选框的选中状态的联动
    用localStorage在页面间传值
    移动端页面输入法挡住input输入框的解决方法
    input[type=file]上传图片及转为base64码以及预览
    截取url参数
    图片加载完成再执行事件
    每天记录一点点
    图片懒加载
    @ font-face 引入本地字体文件
    vue 仿zTree折叠树
  • 原文地址:https://www.cnblogs.com/wyhlightstar/p/10020689.html
Copyright © 2011-2022 走看看