相关疑难解决方法(0)

使用自动调整大小创建textarea

还有另外一个关于这个问题,我试过了.但是有一个问题:textarea如果删除内容,则不会缩小.我找不到任何方法将它缩小到正确的大小 - clientHeight值返回为完整的大小,而textarea不是其内容.

该页面的代码如下:

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 ) …
Run Code Online (Sandbox Code Playgroud)

html javascript height textarea resize

328
推荐指数
15
解决办法
38万
查看次数

将HTML转换为contentEditable中的纯文本

我有一个contentEditable,我on('paste')通过捕捉事件剥离粘贴内容的格式.然后我关注textarea,将内容粘贴到那里,然后复制值.几乎是这里的答案.问题是我不能这样做:

$("#paste-output").text($("#area").val());
Run Code Online (Sandbox Code Playgroud)

因为这会用粘贴的文本替换我的整个内容.所以我需要将内容粘贴到插入位置.我整理了一个脚本来做到这一点:

pasteHtmlAtCaret($("#area").val());

// pastes CTRL+V content at caret position
function pasteHtmlAtCaret(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(), node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);

      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery text contenteditable

17
推荐指数
2
解决办法
1万
查看次数

使输入元素(type ="text")处理多行文本

我已经创建了一个带有输入的表单,但该框仅处理单行中的文本.我想设置它以使输入字段类似于Twitter的输入字段,其中框本身是多行:

Twitter的输入

当你点击输入时它也会扩展:

在此输入图像描述

这是我现在拥有的:

<form name="userForm">
  <input type="text" id="userInput" name="userInput" placeholder="Enter text here.">
  <button type="submit" id="button">Submit</button>
</form>
Run Code Online (Sandbox Code Playgroud)

我已经设置了按钮和输入的样式,但没有做任何改变其形状的事情,所以它是默认的.我有什么调整才能实现这一目标?

html css forms twitter input

4
推荐指数
2
解决办法
5万
查看次数

标签 统计

html ×3

javascript ×2

contenteditable ×1

css ×1

forms ×1

height ×1

input ×1

jquery ×1

resize ×1

text ×1

textarea ×1

twitter ×1