请选择 进入手机版 | 继续访问电脑版

让html任何标签都可以拥有input/textarea的输入能力

发表于 03-29 23:30 显示全部楼层 25 955

今晚挺闲的~~嗯.没错,今天下了个早班,所以写了两篇文章~~~


这篇要说的是一个可以让任何html都可以拥有跟input/textarea一样的输入能力~~


contenteditable属性


先上效果图:

9.gif

看起来是不是跟input或者textarea差不多!

其实这个是一个div来的,下面上代码:

//html
<div contenteditable="true"></div>
//js
$('[contenteditable]').focus(function() {
  // 干掉IE http之类地址自动加链接
  try {
      document.execCommand("AutoUrlDetect", false, false);
  } catch (e) {}

  $(this).on('paste', function(e) {
      e.preventDefault();
      var text = null;

      if(window.clipboardData && clipboardData.setData) {
          // IE
          text = window.clipboardData.getData('text');
      } else {
          text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('在这里输入文本');
      }
      if (document.body.createTextRange) {
          if (document.selection) {
              textRange = document.selection.createRange();
          } else if (window.getSelection) {
              sel = window.getSelection();
              var range = sel.getRangeAt(0);

              // 创建临时元素,使得TextRange可以移动到正确的位置
              var tempEl = document.createElement("span");
              tempEl.innerHTML = "&#FEFF;";
              range.deleteContents();
              range.insertNode(tempEl);
              textRange = document.body.createTextRange();
              textRange.moveToElementText(tempEl);
              tempEl.parentNode.removeChild(tempEl);
          }
          textRange.text = text;
          textRange.collapse(false);
          textRange.select();
      } else {
          // Chrome之类浏览器
          document.execCommand("insertText", false, text);
      }
  });
});

js是为了防止复制文本进去的时候会把文字默认的颜色给复制进去了的阻止方法(也就是清空复制粘贴文字的css样式);

QQ空间发表说说/知乎发表文章都是使用这个属性来做的;

回复 使用道具
举报
园子的遇见

发表于 05-12 09:44 显示全部楼层

╭══╮ ┌══════┐   ╭╯让路║═‖ 酱油专用车 ‖   ╰⊙═⊙╯ └══⊙═⊙═~. 作为一个资深的酱油党,我们需要做的不仅仅是路过,在路过的同时 还要关心楼主,鼓励楼主,在这个冷漠的时代,给予楼主温暖。酱油党莅临的地方,不仅仅是挽尊,不仅仅是消灭零回复,酱油
回复 支持 反对 使用道具
举报
1834183435

发表于 04-21 15:32 显示全部楼层

崇拜崇拜~~~~~


回复 支持 反对 使用道具
举报
huangqin

发表于 04-11 13:27 显示全部楼层

不明觉厉

回复 支持 反对 使用道具
举报
BehindShirs

发表于 04-09 00:54 显示全部楼层

崇拜崇拜~~~~~
回复 支持 反对 使用道具
举报
目定口呆

发表于 04-06 11:24 显示全部楼层

回复 支持 反对 使用道具
举报
sup

发表于 04-05 16:47 显示全部楼层

回复 支持 反对 使用道具
举报
随手拾起

发表于 04-05 13:03 显示全部楼层

回复 支持 反对 使用道具
举报
金夜威尼香

发表于 04-05 10:08 显示全部楼层

  ╭══╮ ┌══════┐

  ╭╯让路║═‖ 酱油专用车 ‖

  ╰⊙═⊙╯ └══⊙═⊙═~. 作为一个资深的酱油党,我们需要做的不仅仅是路过,在路过的同时 还要关心楼主,鼓励楼主,在这个冷漠的时代,给予楼主温暖。酱油党莅临的地方,不仅仅是挽尊,不仅仅是消灭零回复,酱油

回复 支持 反对 使用道具
举报
新水哥

发表于 04-05 03:42 显示全部楼层

回复 支持 反对 使用道具
举报
123下一页

发表新文章
大版主

超级版主

200

学分

3957

学币

5176

积分

超级版主

Rank: 8Rank: 8

积分
5176

签到之王勋章关注小码哥教育公众号关注新浪微博小码哥一周年勋章活动达人勋章小码哥版主勋章前100注册用户勋章意见领袖勋章论坛荣誉内测勋章小码哥网页UI学员勋章论坛百帖达成勋章真土豪勋章勋章签到周冠军勋章签到月冠军勋章签到超新星勋章小码哥周年庆杯子小码哥周年庆纪念勋章小码哥周年庆手机壳小码哥周年庆鼠标垫小码哥周年庆T恤

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育