تغییر اندازه اتوماتیک متن در کادر متنی

نوشته‌شده در در آموزش های عمومی
Loading Likes...

این کد متن داخل کادر متن را بصورت خودکار تغییر اندازه میده ا تو کادر متن جا بگیره.

HTML

<input type='text' id='resizer' placeholder='Fill me with text.'>

CSS

/* 
  CSS 
  -  None of this is required for resizer to work.
*/

body {
    background-image: url(http://i.imgur.com/iWUM6.jpg);
    width: 100%;
    background-size: fit;
}

input[type='text']{

    color: #333;
    width: 280px;
    height: 38px;
    margin-left: -150px;
    margin-top: -19px;
    position: fixed;
    left: 50%;
    top: 50%;
    padding-left: 10px;
    padding-right: 10px;

    transition: box-shadow 320ms;

    box-shadow: 0px 0px 8px 10px rgba(0,0,0,0.1);

    border-radius: 3px;
    font-size: 18px;
    border: 0px;
}

input[type='text']:focus {

    outline: 0px;
    outline-offset: 0px;
    box-shadow: 0px 0px 1px 5px rgba(0,0,0,0.12);
}

input:-moz-placeholder {
    color: #cccccc;
}

 

 Java script

function Resizer( element ) {

    var inputBox = element;
    var cssRules = window.getComputedStyle(inputBox);
    var maxFontSize = parseInt(cssRules.getPropertyValue("font-size"));
    var minFontSize = 11; // 11 is pretty damn small!
    var currentFontSize = maxFontSize;
    var maxScrollWidth = parseInt(cssRules.getPropertyValue("width"))
    var fontFamily = cssRules.getPropertyValue("font-family");
    var currentText = inputBox.value;

    // Canvas used to check text widths.
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    var initialize = function() {

        inputBox.oninput = onUpdate;
    }

    var onUpdate = function(event) {

        var width;
        // Some text has been deleted!
        if (inputBox.value.length < currentText.length) {
            width = checkTextWidth(inputBox.value, currentFontSize + 1);

            while (width < maxScrollWidth && currentFontSize < maxFontSize) {
                currentFontSize += 1;
                inputBox.style.fontSize = currentFontSize + 'px';
                width = checkTextWidth(inputBox.value, currentFontSize + 1);
            }

            currentText = inputBox.value;
            return;

        }

        var width = checkTextWidth(inputBox.value, currentFontSize);

        // Shrink
        while (currentFontSize > minFontSize && width > maxScrollWidth) {
            currentFontSize -= 1;
            inputBox.style.fontSize = currentFontSize + 'px';
            width = checkTextWidth(inputBox.value, currentFontSize);
        }

        currentText = inputBox.value;
    }

    var checkTextWidth = function(text, size) {
        context.font = size + "px " + fontFamily;

        if (context.fillText) {
            return context.measureText(text).width;
        } else if (context.mozDrawText) {
            return context.mozMeasureText(text);
        }
    }

    // Initialize the auto adapt functionality.
    initialize();
}

Resizer( document.getElementById( 'resizer' ) );

 

دموی آنلاین

تا بارگذاری کامل کمی صبر کنید

 

See the Pen Resizer by Tim Holman (@tholman) on CodePen



سوالی دارید؟

بدون گرفتن نتیجه اینجا رو ترک نکنید! هر سوالی دارید میتونید در عرض ۱۵ ثانیه ثبت نام و خیلی زود جواب بگیرید.

2 دیدگاه برای «تغییر اندازه اتوماتیک متن در کادر متنی»

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

3 + 7 =