javascript - textarea 模仿效果不佳。任何替代品？

Question

我有这个 html 和 css:http://jsfiddle.net/b7rDL/6/

HTML:

<div class="text-block" contenteditable="true" spellcheck="false">Some Text</div>

CSS:

.text-block {
    resize: none;
    font-size:40px;
    border: none;
    line-height: 1;
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    min-width: 30px;
    overflow: visible;
    white-space: nowrap;
    display: inline-block;
}

此代码允许我编写没有宽度限制或高度限制的文本。它不显示滚动条，它随文本一起增长。这些基本上是我需要的功能。

1. 如何将其转换为具有相同行为的常规文本区域？我希望它能在没有实现“contenteditable”的浏览器上工作。因此我想用 textarea 或其他 basiv 元素替换 div。我该怎么做？ (我不介意使用 JavaScript)。
2. 如何禁用拼写检查程序？ spellcheck=false 不起作用。在这个例子中，当我关注文本框时，我看到了那条有问题的红线。我正在使用火狐。
3. 当我专注时如何摆脱边界？ - 已解决

我不介意使用 JavaScript 来解决这些问题。

这些问题的任何答案都会对我有所帮助。

谢谢

更新:
@Oylex 帮我解决了 3

Answer 1

#1

工作 fiddle 在这里:http://jsfiddle.net/d9H9w/11/ (在 IE8、Chrome 和 Firefox 中测试)

您需要在用户在文本框中输入时设置宽度和高度属性。

高度

这很简单:

1. 获取textarea的内容
2. 匹配换行符
3. 将高度设置为 em 中换行符的总数(第一行加一个，摆动空间加 1.5)。

以 em 为单位设置高度使该字体大小不可知，因此它适用于多种字体大小。

function getNewlines(){
    // get the value(text) of the textarea
    var content = textEl.value;

    //use regex to find all the newline characters
    var newLines = content.match(/\n/g);

    // use the count of newlines(+1 for the first line + 1 for a buffer)
    // to set the height of the textarea.
    textEl.style.height = ((newLines && newLines.length || 0)+2.5)+'em';
};

宽度

这也很容易，只要有一个问题。

1. 获取textarea的内容
2. 拆分换行符以获得由文本区域的行组成的数组
3. 排序以获得最长的行
4. 将宽度设置为 em 中最长字符串的长度，乘以大约 .6(我的代码中的 emRatio)，再加上 2 em 的缓冲区空间。

最后一部分是关键。 'em' 测量值应该是一个正方形，表示单个字符占据的宽度和高度。这不考虑字距调整，因此字符的高度通常是准确的，但宽度取决于它周围的字符。因此，通过猜测和检查，我认为 .6 em 大约是字距调整后字符的平均宽度。 .6 非常接近，所以我在宽度上增加了 2 em 以获得一点缓冲空间。

var emRatio = .6;
function longestLine(){
    // get the value(text) of the textarea
    var content = textEl.value;

    // split on newline's. this creates an array, where each item in
    // the array is the text of one line
    var a = content.split('\n');

    // use a sorting function to order the items in the array:
    // longest string to shortest string
    a.sort(function(a,b){return b.length - a.length});

    // use the longest string * the emRatio to set the width
    // Due to kerning, the letters aren't ever really 1em x 1em
    // So I'm multiplying by an approximate ratio here (guess and check)
    textEl.style.width = (a[0].length * emRatio + 2)+ 'em';
};

此实现存在的问题

• 为了支持在长按按键期间调整大小，还必须包含一个 onkeydown 处理程序(这对于不包括长按按键的所有情况并不是最佳的)

综合考虑，我认为这符合您的需要。

编辑

我没有将 emRatio 设置为 .7，而是将其更改为 .6，并在宽度上添加了 2 ems 的缓冲区。这解决了@Naor 在他的评论中提到的两个问题。

我更新了 fiddle 链接和 Width 部分以反射(reflect)更改。