این کد متن داخل کادر متن را بصورت خودکار تغییر اندازه میده ا تو کادر متن جا بگیره.
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
بسیار عالی
سلام
سایت های زیادی هستن که این امکانو دارن یکیش که ما استفاده کردیم CODEPEN هستش