Question

我正在尝试使用HTML5和JavaScript编写画布图应用程序。此应用程序中的主要元素是一个框，用户可以在其中写入长文本，并且在编写文本时应调整框的大小。我意识到最好的方法是在用户想要写入时使用textarea标签，当用户在textarea上失去焦点（模糊事件）时，它将变为textarea中具有相同值的标签。您可以在下面看到相关代码：

<!DOCTYPE html public "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TB/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Editable Label</title>
    <!--<link rel="stylesheet" href="box.css">-->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#txt').blur(function () {
                if ($('#txt').val().trim() != '') {
                    $('#txt').hide();
                    $('#lbl').html($('#txt').val());
                    $('#txt').val('');
                }
            });

            $('#lbl').click(function () {

                if ($('#lbl').html().trim() != '') {

                    $('#txt').show();

                    $('#txt').val($('#lbl').html());

                    $('#lbl').html('');
                }
            });
        });


    </script>
</head>
<body>


    <div id="container" align="center" style="width:1300px; height:700px; position:relative;">
        <canvas id="myCanvas" width="1300px" height="700px" style="border: 1px solid #323232;" ></canvas>
        <span id="lbl" style="color: #ff0000; font-size: 14px; font-weight: bold; position:absolute; top:200px; left:170px;"></span>
        <textarea id="txt" type="text" style="position:absolute; top:200px; left:170px;"></textarea>

    </div>




</body>
</html>

我可以通过使用textarea标签而不是输入标签使文本框显示为多行，但问题是我不知道如何使标签出现在多行中。我搜索了很多并且已经使用white-space:normal;和display:inline-block;以及width: 20px;来设置标签样式，但它不起作用。我想知道是否需要使用Jquery调整标签大小（宽度和高度）。如果是的话，我到底该怎么做呢？请注意，由于用户输入了未知数量的单词，因此我无法使用换行标记。

任何帮助都将受到高度赞赏。

Answer 1

我认为你想要的是

溢出：隐藏;或溢出：可见;

这样：

<textarea id="txt" type="text" style="position:absolute; top:200px; left:170px; overflow:hidden;"></textarea>

如果使用CSS，那么阅读代码会更容易。

我不确定你当时要做什么，width:220px;让我的文章中断了。这也有效，我相信它更符合我认为你想要做的事情：

    #lbl{           
        max-width:220px;
        height:auto;
    }

HTML5中的可调节和多行标签

1 个答案: