Question

我想复制你看到一个常规输入文本，当你点击它时会变成textarea。这是一个隐藏层还是实际上将输入更改为textarea？怎么做？

Answer 1

我相信它总是一个文本区域并且在焦点上它们只是改变了textarea的高度。

编辑：是的，确实如此。他们使用脚本来处理textarea的所有内容，没有输入字段。

<textarea onfocus='CSS.addClass("c4b900e3aebfdd6a671453", "UIComposer_STATE_INPUT_FOCUSED");CSS.removeClass("c4b900e3aebfdd6a671453_buttons", "hidden_elem");window.UIComposer &amp;&amp; UIComposer.focusInstance("c4b900e3aebfdd6a671453");' id="c4b900e3aebfdd6a671453_input" class="UIComposer_TextArea DOMControl_placeholder" name="status" title="What's on your mind?" placeholder="What's on your mind?">
What's on your mind?
</textarea>

Answer 2

我发现一种方法是让文本区域以较小的宽度和高度开始，然后动态调整大小。

function sz(t) {
a = t.value.split('\n');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}

然后你会用onclick事件调用你的函数

onclick="function sz(this)"

我在这里找到了

Fellgall Javascript

他提到的一个问题是，这只能在支持它的浏览器上运行。

Answer 3

您可以将here的jQuery小部件与某些代码

结合起来

示例：

<div id="myform">
<form>
    <textarea></textarea>
    <button type="submit" style="display:none;">Post</button>
</form>
</div>
<script>
$(document).ready(function(){
    var widget = $('#myform textarea');
    var button = $('#myform button');
    var tarea = widget[0];
    // turn the textarea into an expandable one
    widget.expandingTextArea();

    var nullArea = true;
    tarea.value = "What's on your mind?"; 
    widget.focus(function() {
        button.css('display', 'block');
        if (nullArea) {
            tarea.value = "";
            nullArea = false;
        }
    });
    widget.blur(function() {
        if ($.trim(tarea.value) == "") {
            tarea.value = "What's on your mind?";
            button.css('display', 'none');
            nullArea = true;
        }
    });

});
</script>

此代码默认隐藏了帖子按钮，只有当textarea被聚焦或者你已经写了一些内容时才会显示它（你可能想隐藏/显示div或者你想要的任何东西）。

Answer 4

如果jQuery是你的一个选项，那么就有一个jQuery插件可以做到这一点Jeditable。

查看demos here。

Answer 5

执行此操作的一种方法是编写动态文本区域。本文介绍了如何执行此操作：http://www.felgall.com/jstip45.htm

另一种方法是更改对象的类型。假设您将输入文本放在div标签中（其ID为“commentBox”。代码将为：

//when you click on the textbox
function makeTextArea()
{
    document.forms[0].getElementById("commentBox").innerHTML = "<textarea id=\"comments\" onBlur=\"backToTextBox()\"></textarea>";
    document.forms[0].getElementById("comments").focus();
}

//when you click outside of the textarea
function backToTextBox()
{
    document.forms[0].getElementById("commentBox").innerHTML = "<input type=\"text\" id=\"comments\" onFocus=\"makeTextArea()\"/>";
}

将输入文本更改为textarea就像在facebook中一样

5 个答案: