代码之家 › 专栏 › 技术社区 › xRobot

如何使用jQuery和/或javascript创建textarea?

javascript-events css html jquery javascript

xRobot · 技术社区 · 14 年前

我需要用jquery和/或javascript创建一个textarea。

我正在使用这个代码( click here for preview )但是backspace,enter,simbols和小写不起作用。为什么?:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset=utf-8 />
        <title>TEST</title>
        <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type="text/javascript">
        <!--
            $(document).keyup(function (event) {
                var keyCode = event.keyCode;
                $('#mytext').text(function (i, text) {
                    return text + String.fromCharCode(keyCode);
                });
            });
        // -->
        </script>
        <style>
            #cmd {
                position: relative; 
                font-family: courier;
                font-weight:bold;
                font-size: 14px;
                padding: 5px;
                overflow: hidden;
            }
            #mytext {
                float: left; 
                padding-left: 3px;
                white-space: pre;
            }
        </style>
    </head>
    <body>
        <div id="cmd">
            <br>
            <div id="mytext">hello </div>
        </div>
    </body>
</html>

6 回复 | 直到 11 年前

Community CDub 8 年前

为什么不让这些键调用一个函数来放置html呢 <div id="cmd"></div>

我找不到按键事件函数,但它应该给你一个想法

if (keycode==31) {
    $("#cmd").append("<br/>");
}

看这里,他们讨论了keypress上的jquery函数:
jQuery Event Keypress: Which key was pressed?

Thomas Clayson 14 年前

对于keydown和keyup事件,您可以在看事件.键码还有更多或者假装它是ASCII码代码。然而,事实并非如此,而且许多Javascript手册做 "String.fromCharCode(事件.键码)" 事件,则键代码不是将为许多键提供疯狂的结果。没有通用的便携式方法将键码转换为字符。你呢几乎要感觉到浏览器键入并在此基础上创建键映射。

从 http://unixpapa.com/js/key.html

你为什么不用一个带有样式的文本区呢?

Bouke 14 年前

return text + String.fromCharCode(keyCode); 将一个字符串附加到另一个字符串。Backspace和其他控制键不附加字符串,它们执行删除字符/移动插入符号的操作。在这种情况下,您应该自己处理这些键码。也可以将内容指定为 editable

请参见: http://jsbin.com/obuya3/4

Vinzius 14 年前

如果您想用jquery创建textarea,有很多方法。

$("#cmd").append("");

或者你想用DOM。

almazmusic 14 年前

如果你使用HTML5,你可以使用“contenteditable”属性。

Pranay Soni 11 年前

$(document).keyup(function(event) {
  var key = event.which;
  var text = $('#mytext');
      if (key === 13) {
        $(text).append("<br/>");
     } else {
       $(text).append( String.fromCharCode(keyCode));
     }
});

http://jsbin.com/obuya3/8/edit