固定文本区域中的自动字体大小调整 [英] auto font-size adjustment in fixed textarea

问题描述

我遇到了问题.我有一个固定宽度和高度(750x393px)和大字体大小(例如100px)的textarea.如果您在此 textarea 中键入，字体大小应自动减小，以便键入的文本适合 textarea.如果删除一些字符，字体大小应该会增加.

你知道我的意思吗?应该没有溢出和滚动条.字体大小应该减少或增加，以便文本适合文本区域.

a 找到了一个类似的脚本，这将是完美的，但这是一个 div，而不是 textarea，我不知道如何将其更改为 textarea:

HTML:

<div class="block" id="input" contenteditable="true">点击编辑</div>

JS:

$('#border').click(function(){$('#input').focus();});$('#input').keyup(function(event){而 ( $(this).height() > 200) {$(this).css('字体大小', '-=1');}if (event.keyCode == 8 || event.keyCode == 46) {while ( $(this).height() <= 200 && $(this).css('font-size') <= "25px") {$(this).css('字体大小', '+=1');}$(this).css('字体大小', '-=1');}});

CSS:

.block {宽度:400px；字体大小:25px；字体系列:'Helvetica';}.block:焦点{大纲:无；}.边界 {边框:1px 实心 #000；宽度:400px；高度:200px；填充:7px；光标:文本；}

看jsfiddle:http://jsfiddle.net/gwyqsk0s/

<小时>

这是一个带有文本区域的脚本，但是如果我删除一些字符，字体大小不会增加:http://jsfiddle.net/XCXJb/1/

有人可以帮我吗?

解决方案

这很棘手.首先，您必须在可调整大小的textarea 中找出文本的height.为此，我们创建了另一个 textarea，它的 height 设置为 0 px，因此我们可以通过 轻松检查其文本 heightscrollHeight 属性.

我们还必须在按键时将主 textarea 中的文本传递到虚拟 textarea.

HTML:

<textarea id="dummy"></textarea>

JS:

function getHeight(){$("#dummy").val( $("#textarea").val());return $("#dummy").prop("scrollHeight");}$('#textarea').keyup(function(event){while ( getHeight() > $(this).height()) {$(this).css('字体大小', '-=1');$("#dummy").css('font-size', '-=1');}if (event.keyCode == 8 || event.keyCode == 46) {while ( getHeight() <= $(this).height() && $(this).css('font-size') <= "25px") {$(this).css('字体大小', '+=1');$("#dummy").css('font-size', '+=1');}$(this).css('字体大小', '-=1');$("#dummy").css('font-size', '-=1');}});

CSS:

#textarea, #dummy {宽度:200px；字体大小:18px；}#textarea {高度:100px；调整大小:无；溢出-y:隐藏；}#假的 {可见性:隐藏；高度:0px；}

一个有效的小提琴是这里.

i got a problem. i have a textarea with fixed width and height (750x393px) and large font-size (eg. 100px). if you type in this textarea, the font-size should automatically be reduced so the typed text fits into the textarea. if you delete some chars the font-size should increase.

you know what i mean? there should be no overflow and no scrollbar. the font-size should decrease or increase, so that the text fits into the textarea.

a found a similar script which would be perfect, but this is a div, not a textarea and i dont know how to change this into a textarea:

HTML:

<div class="border" id="border">
     <div class="block" id="input" contenteditable="true">Click to edit</div>
</div>

JS:

$('#border').click(function(){
    $('#input').focus();
});

$('#input').keyup(function(event){
    while ( $(this).height() > 200) {
        $(this).css('font-size', '-=1');
    }
    if (event.keyCode == 8 || event.keyCode == 46) {
        while ( $(this).height() <= 200 && $(this).css('font-size') <= "25px") {
            $(this).css('font-size', '+=1');
        }
            $(this).css('font-size', '-=1');
    }
});

CSS:

.block {
    width:400px;
    font-size:25px;
    font-family:'Helvetica';
}
.block:focus {
    outline: none;
}
.border {
    border: 1px solid #000;
    width:400px;
    height: 200px;
    padding: 7px;
    cursor:text;
}

look at jsfiddle: http://jsfiddle.net/gwyqsk0s/

---

and here is a script with a textarea, but the font-size doesnt increase, if i delete some chars: http://jsfiddle.net/XCXJb/1/

can someone help me with that?

解决方案

It is quite tricky. At first, you have to find out the height of the text in the resizeable textarea. To do this, we create another textarea, which has height set to 0 px, so we can check its text height easily by scrollHeight property.

We also have to pass the text from main textarea to the dummy textarea on keypress.

HTML:

<textarea id="textarea"></textarea>
<textarea id="dummy"></textarea>

JS:

function getHeight(){

    $("#dummy").val( $("#textarea").val() );
    return $("#dummy").prop("scrollHeight");

}

$('#textarea').keyup(function(event){

    while ( getHeight() > $(this).height()) {
        $(this).css('font-size', '-=1');
        $("#dummy").css('font-size', '-=1');
    }
    if (event.keyCode == 8 || event.keyCode == 46) {
        while ( getHeight() <= $(this).height() && $(this).css('font-size') <= "25px") {
            $(this).css('font-size', '+=1');
            $("#dummy").css('font-size', '+=1');
        }
            $(this).css('font-size', '-=1');
            $("#dummy").css('font-size', '-=1');
    }

});

CSS:

#textarea, #dummy {

    width: 200px; 
    font-size: 18px;

}

#textarea {

    height: 100px;
    resize: none;
    overflow-y: hidden;

}

#dummy {

    visibility: hidden;
    height: 0px;

}

A working fiddle is here.

这篇关于固定文本区域中的自动字体大小调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！