<input type="text">প্রকৃত মানটির প্রস্থে প্রস্থের স্কেল করার কোনও উপায় আছে কি ?
input {
display: block;
margin: 20px;
width: auto;
}<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />
<input type="text" value="me too" />উত্তর:
আপনি sizeইনপুট সামগ্রীর দৈর্ঘ্যের জন্য অ্যাট্রিবিউট সেট করে এটি সহজ উপায় করতে পারেন :
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]')
// event handler
.keyup(resizeInput)
// resize on page load
.each(resizeInput);
দেখুন: http://jsfiddle.net/nrabinowitz/NvynC/
এটি ব্রাউজার নির্ভর বলে ডানদিকে কিছু প্যাডিং যুক্ত করেছে বলে মনে হচ্ছে। আপনি যদি এটিটি ইনপুটটির কাছে সত্যই আঁকড়ে রাখতে চান তবে আপনি এই টেক্সটের পিক্সেল আকার গণনা করতে jQuery ব্যবহার করে এই সম্পর্কিত উত্তরে আমার বর্ণনা মতো একটি প্রযুক্তি ব্যবহার করতে পারেন ।
Courier Newটেক্সটবক্সের জন্য ফন্টের আরও ভাল ব্যবহার করি বলে মনে করি , কারণ এই ফন্টের সমস্ত অক্ষরের প্রস্থ সমান। ( jsfiddle.net/NabiKAZ/vynC/745 )
আমি এটি করার বিভিন্ন উপায় দেখেছি কিন্তু ফন্টের প্রস্থের গণনা করা সবসময় 100% নির্ভুল হয় না, এটি কেবল একটি অনুমান।
আমি কোনও লুকানো স্থানধারক থেকে পরিমাপ করে ইনপুট প্রস্থকে সামঞ্জস্য করার একটি পিক্সেল নিখুঁত উপায় তৈরি করতে সক্ষম হয়েছি।
jQuery (প্রস্তাবিত)
$(function(){
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
}).on('input', function () {
$('#hide').text($('#txt').val());
$('#txt').width($('#hide').width());
});body,
#txt,
#hide{
font:inherit;
margin:0;
padding:0;
}
#txt{
border:none;
color:#888;
min-width:10px;
}
#hide{
display:none;
white-space:pre;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum
<span id="hide"></span><input id="txt" type="text" value="type here ...">
egestas arcu.
</p>খাঁটি জাভাস্ক্রিপ্ট
আমি নির্ধারণ করতে অক্ষম ছিলাম যে jQuery কীভাবে লুকানো উপাদানের প্রস্থ গণনা করে তাই এই সমাধানটি সামঞ্জস্য করার জন্য সিএসএসে সামান্য একটি টুইট করা দরকার।
var hide = document.getElementById('hide');
var txt = document.getElementById('txt');
resize();
txt.addEventListener("input", resize);
function resize() {
hide.textContent = txt.value;
txt.style.width = hide.offsetWidth + "px";
}body,
#txt,
#hide {
font: inherit;
margin: 0;
padding: 0;
}
#txt {
border: none;
color: #888;
min-width: 10px;
}
#hide {
position: absolute;
height: 0;
overflow: hidden;
white-space: pre;
}<p>Lorem ipsum
<span id="hide"></span><input id="txt" type="text" value="type here ..."> egestas arcu.
</p>hideএকই প্যাডিং থাকতে height: 0;হবে ) অংশটি সঠিকভাবে কাজ করবে না। এই ইস্যুটির একটি কার্যকারিতা হ'ল ব্যবহার করা হবে position: fixed; top: -100vh;, আপনি opacity: 0;নিরাপদে থাকতেও যোগ করতে পারেন ।
যদি কোনও কারণে অন্যান্য সমাধানগুলি আপনার পক্ষে কাজ করে না, আপনি একটি ইনপুট উপাদানটির পরিবর্তে কনটেন্টেটেটেবল-স্প্যান ব্যবহার করতে পারেন।
<span contenteditable="true">dummy text</span>
মনে রাখবেন যে এটি হ্যাকের আরও একটি অংশ এবং সম্পূর্ণরূপে অযাচিত HTML HTML ইনপুটকে ব্যবহারকারীদের লাইনব্রেকগুলি, লিঙ্কগুলি এবং অন্যান্য এইচটিএমএল প্রবেশ করার অনুমতি দেওয়ার মতো গুরুতর অসুবিধা রয়েছে।
সুতরাং আপনি যদি খুব সাবধানে ইনপুট স্যানিটেশন না করেন তবে আপনার সম্ভবত এই সমাধানটি ব্যবহার করা উচিত নয় ...
আপডেট : আপনি সম্ভবত নীচে ড্রিমটেকের সমাধানটি ব্যবহার করতে চান ।
contenteditableএকটি সমৃদ্ধ-পাঠ্য WYSIWYG পাঠ্য-সম্পাদক স্থাপনের জন্য। ইনপুটগুলির আকার পরিবর্তন করতে নয়।
সম্পাদনা করুন : প্লাগইন এখন শ্বেত স্পেস অক্ষরগুলি অনুসরণ করে কাজ করে। এটি জাভা এসপিডিয়ার দেখানোর জন্য ধন্যবাদ
যেহেতু বেশিরভাগ অন্যান্য উত্তরগুলি আমার প্রয়োজনের সাথে মেলে না (বা কেবলমাত্র কার্যকর হয়নি) আমি অ্যাড্রিয়ান বি এর উত্তরটিকে একটি সঠিক জিকুয়েরি প্লাগইনে রূপান্তরিত করে যার ফলে আপনাকে আপনার সিএসএস বা এইচটিএমএল পরিবর্তন না করে পিক্সেলের নিখুঁত স্কেলিংয়ের ফলাফল দেয়।
উদাহরণ: https://jsfiddle.net/587aapc2/
ব্যবহার:$("input").autoresize({padding: 20, minWidth: 20, maxWidth: 300});
প্লাগ লাগানো:
//JQuery plugin:
$.fn.textWidth = function(_text, _font){//get width of text with font. usage: $("div").textWidth();
var fakeEl = $('<span>').hide().appendTo(document.body).text(_text || this.val() || this.text()).css({font: _font || this.css('font'), whiteSpace: "pre"}),
width = fakeEl.width();
fakeEl.remove();
return width;
};
$.fn.autoresize = function(options){//resizes elements based on content size. usage: $('input').autoresize({padding:10,minWidth:0,maxWidth:100});
options = $.extend({padding:10,minWidth:0,maxWidth:10000}, options||{});
$(this).on('input', function() {
$(this).css('width', Math.min(options.maxWidth,Math.max(options.minWidth,$(this).textWidth() + options.padding)));
}).trigger('input');
return this;
}
//have <input> resize automatically
$("input").autoresize({padding:20,minWidth:40,maxWidth:300});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="i magically resize">
<br/><br/>
called with:
$("input").autoresize({padding: 20, minWidth: 40, maxWidth: 300});fontএটি সিএসএস শর্টহ্যান্ড (আশ্চর্যজনকভাবে এফএফ এটি পরিচালনা করতে পারে না )। আপনিই প্রথম ফাংশনে সংজ্ঞা দ্বারা এই সমাধান করতে পারেন: var _this_font = [this.css('font-style'), this.css('font-variant'), this.css('font-weight'), 'normal', this.css('font-size') + ' / ' + this.css('line-height'), this.css('font-family')].join(' ');। তারপরে পরিবর্তন this.css('font')হবে _this_font।
গিটহাবের কাছে আমার একটি jQuery প্লাগইন রয়েছে: https://github.com/MartinF/jQuery.Autosize.Input
এটি ইনপুটটির মান আয়না করে, প্রস্থ গণনা করে এবং ইনপুটটির প্রস্থ নির্ধারণের জন্য এটি ব্যবহার করে।
আপনি এখানে একটি সরাসরি উদাহরণ দেখতে পারেন: http://jsfiddle.net/mJMpw/2175/
এটি কীভাবে ব্যবহার করা যায় তার উদাহরণ (কারণ একটি jsfiddle লিঙ্ক পোস্ট করার সময় কিছু কোডের প্রয়োজন হয়):
<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />
input[type="data-autosize-input"] {
width: 90px;
min-width: 90px;
max-width: 300px;
transition: width 0.25s;
}
আপনি কেবল নূন্যতম / সর্বাধিক প্রস্থ নির্ধারণ করতে CSS ব্যবহার করেন এবং যদি আপনি একটি দুর্দান্ত প্রভাব চান তবে প্রস্থে একটি রূপান্তর ব্যবহার করুন।
ইনপুট উপাদানটিতে ডেটা-অটোসাইজ-ইনপুট অ্যাট্রিবিউটের জন্য জেসন নোটেশনের মান হিসাবে আপনি শেষের স্থান / দূরত্ব নির্দিষ্ট করতে পারেন।
অবশ্যই আপনি এটি jQuery ব্যবহার করে আরম্ভ করতে পারেন
$("selector").autosizeInput();
ইতিমধ্যে এখানে অনেক ভাল উত্তর আছে। মজা করার জন্য, আমি অন্যান্য উত্তর এবং আমার নিজের ধারণার উপর ভিত্তি করে নীচে এই সমাধানটি প্রয়োগ করেছি।
<input class="adjust">
ইনপুট উপাদান সঠিক পিক্সেল সামঞ্জস্য করা হয় এবং একটি অতিরিক্ত অফসেট সংজ্ঞায়িত করা যায়।
function adjust(elements, offset, min, max) {
// Initialize parameters
offset = offset || 0;
min = min || 0;
max = max || Infinity;
elements.each(function() {
var element = $(this);
// Add element to measure pixel length of text
var id = btoa(Math.floor(Math.random() * Math.pow(2, 64)));
var tag = $('<span id="' + id + '">' + element.val() + '</span>').css({
'display': 'none',
'font-family': element.css('font-family'),
'font-size': element.css('font-size'),
}).appendTo('body');
// Adjust element width on keydown
function update() {
// Give browser time to add current letter
setTimeout(function() {
// Prevent whitespace from being collapsed
tag.html(element.val().replace(/ /g, ' '));
// Clamp length and prevent text from scrolling
var size = Math.max(min, Math.min(max, tag.width() + offset));
if (size < max)
element.scrollLeft(0);
// Apply width to element
element.width(size);
}, 0);
};
update();
element.keydown(update);
});
}
// Apply to our element
adjust($('.adjust'), 10, 100, 500);
সামঞ্জস্যটি সিএসএস রূপান্তর দিয়ে ধীরে ধীরে পায়।
.adjust {
transition: width .15s;
}
এখানে বেহালার । আমি আশা করি এটি পরিষ্কার সমাধান খুঁজতে অন্যকে সহায়তা করতে পারে।
একটি ডিভি তৈরি করার এবং এর প্রস্থ পরিমাপ করার চেষ্টা করার পরিবর্তে, আমি মনে করি এটি সরাসরি সঠিকভাবে ক্যানভাস উপাদান ব্যবহার করে প্রস্থটি পরিমাপ করা আরও নির্ভরযোগ্য।
function measureTextWidth(txt, font) {
var element = document.createElement('canvas');
var context = element.getContext("2d");
context.font = font;
return context.measureText(txt).width;
}
এখন আপনি এটি করে কিছু ইনপুট উপাদানগুলির প্রস্থের যে কোনও সময়ে হওয়া উচিত তা পরিমাপ করতে এটি ব্যবহার করতে পারেন:
// assuming inputElement is a reference to an input element (DOM, not jQuery)
var style = window.getComputedStyle(inputElement, null);
var text = inputElement.value || inputElement.placeholder;
var width = measureTextWidth(text, style.font);
এটি একটি সংখ্যা ফেরত দেয় (সম্ভবত ভাসমান পয়েন্ট)। আপনি যদি প্যাডিংয়ের জন্য অ্যাকাউন্ট করতে চান তবে আপনি এটি ব্যবহার করে দেখতে পারেন:
var desiredWidth = (parseInt(style.borderLeftWidth) +
parseInt(style.paddingLeft) +
Math.ceil(width) +
1 + // extra space for cursor
parseInt(style.paddingRight) +
parseInt(style.borderRightWidth))
inputElement.style.width = desiredWidth + "px";
জেএস জড়িত না এই সমস্যাটির জন্য আমি আরও একটি সমাধান পেয়েছি। এইচটিএমএলে আমি ঠিক এর মতো কিছু রেখেছি:
<div>
<input class="input" value={someValue} />
<div class="ghost-input">someValue</div>
</div>
দৃশ্যমানতা সেট করার জন্য সমস্ত প্রয়োজন: ভুত-ইনপুট এবং প্রস্থে লুকানো: ইনপুটটিতে নিজেই 100%। এটি কাজ করে কারণ ইনপুটটি তার ধারকটির 100% এর স্কেল করে যার প্রস্থটি ব্রাউজার নিজেই গণনা করে (একই পাঠ্যের ভিত্তিতে)।
আপনি যদি ইনপুট ক্ষেত্রে কিছু প্যাডিং এবং সীমানা যুক্ত করেন তবে আপনাকে সেই অনুযায়ী আপনার ভুত-ইনপুট শ্রেণিকে সামঞ্জস্য করতে হবে (বা ইনপুট শ্রেণিতে ক্যালক () ব্যবহার করতে হবে)।
আপনি এই সমস্যার সমাধান এখানে করতে পারেন :) http://jsfiddle.net/MqM76/217/
এইচটিএমএল:
<input id="inpt" type="text" />
<div id="inpt-width"></div>
জেএস:
$.fn.textWidth = function(text, font) {
if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
$.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
return $.fn.textWidth.fakeEl.width();
};
$('#inpt').on('input', function() {
var padding = 10; //Works as a minimum width
var valWidth = ($(this).textWidth() + padding) + 'px';
$('#'+this.id+'-width').html(valWidth);
$('#inpt').css('width', valWidth);
}).trigger('input');
দুর্ভাগ্যক্রমে sizeবৈশিষ্ট্যটি খুব ভাল কাজ করবে না। ফন্ট কীভাবে সেট আপ করা হবে তার উপর নির্ভর করে কখনও কখনও অতিরিক্ত স্থান এবং খুব অল্প জায়গা থাকবে। (উদাহরণটি দেখুন)
আপনি যদি এটিটি ভালভাবে কাজ করতে চান তবে ইনপুটটিতে পরিবর্তনগুলি দেখার চেষ্টা করুন এবং তারপরে এটি আকার দিন। আপনি সম্ভবত এটি ইনপুটটিতে সেট করতে চান scrollWidth। আমাদেরও বক্স সাইজের জন্য অ্যাকাউন্ট করতে হবে।
নিম্নলিখিত উদাহরণে, আমি আমাদের প্রাথমিক প্রস্থের চেয়ে বৃহত্তর (সিএসএসের সাহায্যে ম্যানুয়ালি সেট করুন) এমনটি sizeরোধ করতে ইনপুটটিকে 1 এ scrollWidthসেট করছি।
// (no-jquery document.ready)
function onReady(f) {
"complete" === document.readyState
? f() : setTimeout(onReady, 10, f);
}
onReady(function() {
[].forEach.call(
document.querySelectorAll("input[type='text'].autoresize"),
registerInput
);
});
function registerInput(el) {
el.size = 1;
var style = el.currentStyle || window.getComputedStyle(el),
borderBox = style.boxSizing === "border-box",
boxSizing = borderBox
? parseInt(style.borderRightWidth, 10) +
parseInt(style.borderLeftWidth, 10)
: 0;
if ("onpropertychange" in el) {
// IE
el.onpropertychange = adjust;
} else if ("oninput" in el) {
el.oninput = adjust;
}
adjust();
function adjust() {
// reset to smaller size (for if text deleted)
el.style.width = "";
// getting the scrollWidth should trigger a reflow
// and give you what the width would be in px if
// original style, less any box-sizing
var newWidth = el.scrollWidth + boxSizing;
// so let's set this to the new width!
el.style.width = newWidth + "px";
}
}* {
font-family: sans-serif;
}
input.autoresize {
width: 125px;
min-width: 125px;
max-width: 400px;
}
input[type='text'] {
box-sizing: border-box;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid #ccc;
margin-bottom: 10px;
}<label>
Resizes:
<input class="autoresize" placeholder="this will resize" type='text'>
</label>
<br/>
<label>
Doesn't resize:
<input placeholder="this will not" type='text'>
</label>
<br/>
<label>
Has extra space to right:
<input value="123456789" size="9" type="text"/>
</label>আমি মনে করি এটি আইআই 6 তেও কাজ করা উচিত তবে এটির জন্য আমার শব্দটি গ্রহণ করবেন না।
আপনার ব্যবহারের ক্ষেত্রে উপর নির্ভর করে আপনার অন্যান্য ইভেন্টের সাথে সামঞ্জস্য করতে পারে function উদাহরণস্বরূপ কোনও ইনপুটটির মান প্রোগ্রামক্রমে পরিবর্তন করা, বা উপাদানটির শৈলীর displayসম্পত্তি none(যেখানে scrollWidth === 0) থেকে blockবা এ পর্যন্ত পরিবর্তন করা inline-blockইত্যাদি
আমার jQuery প্লাগইন আমার জন্য কাজ করে:
ব্যবহার:
$('form input[type="text"]').autoFit({
});
এর উত্স কোড jquery.auto-fit.js:
;
(function ($) {
var methods = {
init: function (options) {
var settings = $.extend(true, {}, $.fn.autoFit.defaults, options);
var $this = $(this);
$this.keydown(methods.fit);
methods.fit.call(this, null);
return $this;
},
fit: function (event) {
var $this = $(this);
var val = $this.val().replace(' ', '-');
var fontSize = $this.css('font-size');
var padding = $this.outerWidth() - $this.width();
var contentWidth = $('<span style="font-size: ' + fontSize + '; padding: 0 ' + padding / 2 + 'px; display: inline-block; position: absolute; visibility: hidden;">' + val + '</span>').insertAfter($this).outerWidth();
$this.width((contentWidth + padding) + 'px');
return $this;
}
};
$.fn.autoFit = function (options) {
if (typeof options == 'string' && methods[options] && typeof methods[options] === 'function') {
return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof options === 'object' || !options) {
// Default to 'init'
return this.each(function (i, element) {
methods.init.apply(this, [options]);
});
} else {
$.error('Method ' + options + ' does not exist on jquery.auto-fit.');
return null;
}
};
$.fn.autoFit.defaults = {};
})(this['jQuery']);
ইনপুট উপাদানগুলি অন্যান্য উপাদানগুলির থেকে পৃথকভাবে আচরণ করে, যা আপনি যদি দেন তবে ঠিক কী করবে float: left(দেখুন http://jsfiddle.net/hEvYj/5/ )। আমি জাভাস্ক্রিপ্ট দিয়ে কোনও উপায়ে এটি গণনা করা ছাড়া সম্ভব বলে মনে করি না (যেমন বাক্সে প্রতিটি চিঠি প্রস্থে 5px যোগ করুন)।
ব্যবহারকারীর নরবিনউইটজের সমাধানটি দুর্দান্ত কাজ করছে তবে আমি keypressইভেন্টটি এর পরিবর্তে ব্যবহার করছি keyup। যদি ব্যবহারকারী ধীরে ধীরে টাইপ করেন তবে এটি বিলম্বকে হ্রাস করে।
oninput(বা onpropertychangeউত্তরাধিকার ইন্টারনেট জন্য), সঠিক ঘটনা হিসাবে তারা একটি ডান ক্লিক দিয়ে পেস্ট বা নির্বাচন ভালো জিনিস সাড়া "ফাইল -> পেস্ট" ব্রাউজারের মেনু বার থেকে
এখানে আমার পরিবর্তন হয় nrabinowitz 'সমাধান । আমি আকারটি ব্যবহার করিনি সম্পত্তিটি , কারণ এটি @ মার্কের উল্লেখ অনুসারে আনুপাতিক ফন্টগুলির সাথে নিখুঁত নয়। আমার সমাধানটি আপনার ইনপুটটির পরে একটি উপাদান রাখে এবং ব্রাউজার দ্বারা গণনা করা হয় (jQuery ব্যবহার করে) width
যদিও আমি এটি পরীক্ষা করি না, আমি মনে করি এটি কেবল তখনই কাজ করবে যদি ফন্টকে প্রভাবিত করে সমস্ত CSS বৈশিষ্ট্য উত্তরাধিকার সূত্রে প্রাপ্ত হয়।
ফোকাসআউট ইভেন্টে ইনপুট প্রস্থ পরিবর্তন হয় , যা আমার পক্ষে আরও ভাল কাজ করে। টাইপ করার সময় আপনি ইনপুটটির প্রস্থ পরিবর্তন করতে কীআপ / কীপ্রেস ব্যবহার করতে পারেন ।
function resizeInput() {
//Firstly take the content or placeholder if content is missing.
var content =
$(this).val().length > 0 ? $(this).val() : $(this).prop("placeholder");
//Create testing element with same content as input.
var widthTester = $("<span>"+content+"</span>").hide();
//Place testing element into DOM after input (so it inherits same formatting as input does).
widthTester.insertAfter($(this));
//Set inputs width; you may want to use outerWidth() or innerWidth()
//depending whether you want to count padding and border or not.
$(this).css("width",widthTester.width()+"px");
//Remove the element from the DOM
widthTester.remove();
}
$('.resizing-input').focusout(resizeInput).each(resizeInput);
ক্যানভাস ব্যবহার করে আমরা উপাদানগুলির প্রস্থটি গণনা করতে পারি:
function getTextWidth(text, fontSize, fontName) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
context.font = fontSize + fontName;
return context.measureText(text).width;
}
এবং এটি নির্বাচিত ইভেন্টে ব্যবহার করুন:
function onChange(e) {
let width = getTextWidth(this.value, $(this).css('font-size'),
$(this).css('font-family'));
$(this.input).css('width', width);
}
ক্যানভাস পরিমাপের সমাধান সমাধান করুন
সিএসএস:
input{
min-width:10px!important;
max-width:99.99%!important;
transition: width 0.1s;
border-width:1px;
}
জাভাস্ক্রিপ্ট:
function getWidthOfInput(input){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var text = input.value.length ? input.value : input.placeholder;
var style = window.getComputedStyle(input);
ctx.lineWidth = 1;
ctx.font = style.font;
var text_width = ctx.measureText(text).width;
return text_width;
}
function resizable (el, factor) {
function resize() {
var width = getWidthOfInput(el);
el.style.width = width + 'px';
}
var e = 'keyup,keypress,focus,blur,change'.split(',');
for (var i in e){
el.addEventListener(e[i],resize,false);
}
resize();
}
$( "input" ).each( function(i){
resizable(this);
});
আমি প্রস্থটি ক্যানভাস তৈরি এবং এর আকার গণনা করে সমাধান করেছি। এটি গুরুত্বপূর্ণ যে ইনপুট মান এবং ক্যানভাস একই ফন্টের বৈশিষ্ট্যগুলি ভাগ করে (পরিবার, আকার, ওজন ...)
import calculateTextWidth from "calculate-text-width";
/*
requires two props "value" and "font"
- defaultFont: normal 500 14px sans-serif
*/
const defaultText = 'calculate my width'
const textFont = 'normal 500 14px sans-serif'
const calculatedWidth = calculateTextWidth(defaultText, textFont)
console.log(calculatedWidth) // 114.37890625
গিটহাব: https://github.com/ozluy/calculate-text-width কোডস্যান্ডবক্স: https://codesandbox.io/s/calculate-text-width-okr46