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

代码如下:

  1. <textarea id="text" cols="30" rows="10"></textarea>
  2. <br>
  3. <button id="btn">添加公司</button>
  1. var textareaIndex = 0;
  2. $("#text").on('keydown',function(e){
  3. textareaIndex = this.selectionStart+1;
  4. if(e.keyCode == 8){
  5. var starText,endText,replaceText;
  6. var text = $(this).val();
  7. var selectionIndex = this.selectionStart-1;
  8. if(text[selectionIndex]==']'){
  9. var result = rep(text,selectionIndex);
  10. $(this).val(result.text);
  11. this.selectionStart = this.selectionEnd = result.index;
  12. return false;
  13. }
  14. }
  15. })
  16.  
  17. $("#text").click(function(){
  18. textareaIndex = this.selectionStart; // 获取光标所在下标
  19. })
  20.  
  21. function rep(str,index){
  22. var i = index,k='no';
  23. while(i>0){
  24. if(str[--i]=='['){
  25. k = i;
  26. break;
  27. }
  28. }
  29. if(k=='no')k=index
  30. return {text:str.substring(0,k)+str.substring(index+1),index:k}
  31. }
  32.  
  33. $('#btn').click(function(){
  34. var text = $("#text").val();
  35. var str = text.substring(0,textareaIndex);
  36. var texts = str + '[公司名称]' + text.substring(textareaIndex,text.length);
  37. $("#text").val(texts);
  38. })

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

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

代码如下:

  1. var str = '你好,#微笑;1。加油兄弟#握手;#的哈哈但是.#所属;';
  2.  
  3. function f(str){
  4. var arr = [],tmp = '';
  5. for(var i=0,l=str.length;i<l;i++){
  6. if(str[i]=='#'&&tmp){
  7. arr.push(tmp);
  8. tmp = '';
  9. }
  10. tmp+=str[i];
  11. if(str[i]==';'&&tmp[0]=='#'){
  12. arr.push(tmp);
  13. tmp = '';
  14. }
  15. }
  16. if(tmp)arr.push(tmp)
  17. return arr;
  18. }
  19.  
  20. var data = f(str);
  21.  
  22. console.log(data)
  23. // ["你好,", "#微笑;", "1。加油兄弟", "#握手;", "#的哈哈但是."]

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

工作记录(JS向textarea添加固定内容、通过固定字符将字符串分割为数组)的更多相关文章

  1. js实现把textarea通过换行或者回车把多行数字分割成数组,并且去掉数组中空的值。

    删除数组指定的某个元素 var msg = " ";  //textarea  文本框输入的内容 var emp = [ ];   //定义一个数组,用来存msg分割好的内容 1. ...

  2. CloudBase CMS + Next.js:轻松构建一个内容丰富的站点

    项目背景 试想一下,如果你现在要为你自己或者你所在的组织创建一个强内容的站点,同时要求好的 SEO(搜素引擎优化),比如博客,你会怎么做呢? 由 vite 或者 create-react-app 等脚 ...

  3. JS正则表达式,记录自己所学所用的内容

    还没接触正则表达式感觉确实有那么点难度,但接触到后自己琢磨了几天也没发现那么难. 现在教教刚学的或者还没接触正则表达式的同学们入入门,一起学习. 正则表达式基本语法 ***************** ...

  4. js实现复制|剪切指定内容到粘贴板--clipboard

    这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下.项目地址:https://github.com/zenorocha/clipboard ...

  5. 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  6. 工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox

    原文:工作记录--WPF自定义控件,实现一个可设置编辑模式的TextBox 1. 背景 因为最近在使用wpf开发桌面端应用,在查看页面需要把TextBox和Combox等控件设置为只读的.原本是个很简 ...

  7. 实现textarea高度自适应内容,无滚动条

    最近接触到一个很好用的js插件,可以实现textarea高度随内容增多而改变,并且不显示滚动条,推荐给大家: http://www.jacklmoore.com/autosize/

  8. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  9. 随笔 JS 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里

    JS /* * 字符串 分割成字符串数组 并动态添加到指定ID的DOM 里 * @id 要插入到DOM元素的ID * * 输入值为图片URL 字符串 * */ function addImages(i ...

随机推荐

  1. MATLAB入门(一)数组

     特殊变量: 数组的创建: %% 数组的生成(带:不在命令行显示结果) x= rand() ; %随机生成3*3的矩阵,矩阵数的值在[,] x(:,::); %取所有行,(从第1列开始:步长为2:到第 ...

  2. POJ 2603

    #include<iostream> #include<stdio.h> #define M 350000 #define N 30000 using namespace st ...

  3. mvc大对象json传输报错

    public ActionResult GetLargeJsonResult() { return new ContentResult { Content = new JavaScriptSerial ...

  4. (转)关于python3中staticmethod(静态方法)classmethod(类方法)实例方法的联系和区别

    原文:http://dmcoders.com/2017/08/30/pythonclass/ https://zhuanlan.zhihu.com/p/28010894------正确理解Python ...

  5. spring jpa : 多条件查询

    https://www.cnblogs.com/Donnnnnn/p/6277872.html 方式一: 第一步:EmpAccNumService package com.payease.scford ...

  6. Python之Pyautogui模块20180125《PYTHON快速上手让繁琐的工作自动化》18章

    复习 PyAutoGUI 的函数本章介绍了许多不同函数,下面是快速的汇总参考:moveTo(x,y)将鼠标移动到指定的 x.y 坐标.moveRel (xOffset,yOffset)相对于当前位置移 ...

  7. Maven启用代理服务器访问

    0.什么叫代理服务器? 代理服务器英文全称是(Proxy Server),其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站. 代理服务器就好象一个大的Cache,这样就能显著提高浏 ...

  8. getFields和getDeclaredFields

    getFields()获得某个类的所有的公共(public)的字段,包括父类. getDeclaredFields()获得某个类的所有申明的字段,即包括public.private和proteced, ...

  9. Redis学习之实现优先级消息队列

    很久没有写博客了,最近简单的学习了一下Redis,其中学习了一下用Redis实现优先级消息队列.关于更多更为详细的可以在www.redis.cn找到相关资料. 对于熟悉Redis的童鞋提到队列很自然的 ...

  10. PTA (Advanced Level) 1003 Emergency

    Emergency As an emergency rescue team leader of a city, you are given a special map of your country. ...