jquery - 如何在字体可以调整大小的情况下生成响应式文本框/textarea?

  显示原文与译文双语对照的内容

如果要重新调整文本框/文本区域的大小,我想要做一个响应文本框/文本区域。

正在等待建议。

先谢谢了。

时间: 作者:

你可能需要使用 javascript/jquery插件作为 fitext插件。

或者 BigText

非常感谢你给我的建议。 我的适当需求是类似于这个 example- http://jsfiddle.net/6FTdK/,在 textbox/textarea中我需要的功能。

$('#resizable').resizable({ maxHeight: parseInt(200), maxWidth: parseInt(180), resize: function(evt, ui) {
var width1 = parseInt(ui.element.css('width')), height1 = parseInt(ui.element.css('height')); ui.element.css({ 'font-size': (width1/10)+'px', 'line-height': (height1/10)+'px' }); } });

作者:

你可以在你的div上使用 contenteditable: http://jsfiddle.net/6FTdK/97/

然后,你可以使用ajax提交。

作者:

按照 fiddle,你应该分享下面的内容。 基本上我们只是将整个文本块封装在div中-

  • HTML

    
    <div id="resizable">
     <textarea rows="4" cols="40">This is a textarea. Test for resizing</textarea>
    </div>
    
    
  • CSS

    
    textarea {
     width:100%;
     height:100%;
    }
    
    #resizable {
     height: 100px;
     width: 100px;
     font-size: 10px;
     background: #ccc;
    }
    
    
  • JS

    
    $('#resizable').resizable({
     maxHeight: parseInt(200),
     maxWidth: parseInt(180),
     resize: function(evt, ui) { 
     var width1 = parseInt(ui.element.css('width')),
     height1 = parseInt(ui.element.css('height'));
     ui.element.css({
     'font-size': (width1/10)+'px',
     'line-height': (height1/10)+'px'
     });
     }
    });
    
    
作者:
...