Настраиваемая и многострочная метка в HTML5

Я пытаюсь написать приложение для холста с помощью HTML5 и JavaScript. Основной элемент в этом приложении - это поле, в котором пользователь может написать длинный текст в нем, и размер окна должен корректироваться при написании текста. Я понял, что лучший способ - использовать тег textarea, когда пользователь хочет писать на нем, и когда пользователь теряет фокус (событие размытия) на текстовом поле, он изменится на метку с тем же значением в текстовом поле. Вы можете увидеть, связанный код ниже:Настраиваемая и многострочная метка в HTML5

<!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>

Я мог бы сделать текстовое поле появится в многострочно с помощью текстовой метки вместо ввода тега, но проблема в том, что я не знаю, как сделать этикетку появляются в многострочной линии. Я много искал и уже использовал white-space:normal; и display:inline-block; и width: 20px; в стилизации этикетки, но это не сработало. Мне интересно, нужно ли настраивать размер метки (ширину и высоту) с помощью JQuery. Если да, то как именно я должен это делать?
Обратите внимание, что поскольку пользователь вводит неизвестное количество слов, я не могу использовать теги разрыва строки.

Любая помощь будет высоко оценена.

источник

2014-09-24 zahra

Для html5 ваш Doctype должен быть просто '' – lucusp

Вы также получили дополнительный двойной цитата: «;» > – JonnyAggro

@Fabio Спасибо за редактирование моего вопроса. – zahra

Я думаю, что вы хотите, это

overflow: hidden; или переполнение: видимое;

так:

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

Было бы легче читать код, если вы использовали CSS, хотя.

Я не совсем уверен, что вы пытаетесь сделать тогда, width:220px; сделал текст для меня. Это также работает, и я считаю, что лучше соответствует тому, что я думаю, что вы пытаетесь сделать:

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

источник

2014-09-24 02:58:25 JonnyAggro

Спасибо, что ответили на это. У меня проблема с тегом span, а не с текстовым полем. Извините за css. Я думал, что это проще. – zahra

Настраиваемая и многострочная метка в HTML5

ответ

Смежные вопросы