क्या <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/NvynC/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 कैसे छिपे हुए तत्वों की चौड़ाई की गणना करता है इसलिए इस समाधान को लागू करने के लिए css के लिए एक मामूली ट्विक की आवश्यकता थी।
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 दर्ज करने की अनुमति देता है।
तो आप शायद इस समाधान का उपयोग न करें जब तक कि आप बहुत सावधानी से इनपुट को साफ नहीं कर रहे हों ...
अद्यतन : आप शायद नीचे DreamTeK के समाधान का उपयोग करना चाहते हैं ।
contenteditableएक अमीर-पाठ WYSIWYG पाठ-संपादक स्थापित करने के लिए है। इनपुट का आकार परिवर्तन करने के लिए नहीं।
संपादित करें : प्लगइन अब व्हॉट्सएप पात्रों के साथ काम करता है। @JavaSpyder को इंगित करने के लिए धन्यवाद
चूँकि अधिकांश अन्य उत्तरों का मिलान नहीं हुआ जो मुझे आवश्यक था (या बस काम नहीं किया था) मैंने एड्रियन बी के उत्तर को एक उचित jQuery प्लगइन में संशोधित किया है, जिसके परिणामस्वरूप आपको अपने सीएसएस या HTML को बदलने की आवश्यकता के बिना इनपुट के पिक्सेल सही स्केलिंग में परिणाम होता है।
उदाहरण: 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।
GitHub पर मेरा 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 का उपयोग करते हैं और चौड़ाई पर एक संक्रमण का उपयोग करते हैं।
आप इनपुट एलीमेंट पर डेटा-ऑटोसाइज़-इनपुट विशेषता के लिए json संकेतन में मान के रूप में अंत तक स्थान / दूरी निर्दिष्ट कर सकते हैं।
बेशक आप इसे सिर्फ 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;
}
यहाँ है बेला । मुझे आशा है कि यह दूसरों को एक स्वच्छ समाधान की तलाश में मदद कर सकता है।
एक div बनाने और उसकी चौड़ाई को मापने की कोशिश करने के बजाय, मुझे लगता है कि कैनवास तत्व का उपयोग करके सीधे चौड़ाई को मापना अधिक विश्वसनीय है जो अधिक सटीक है।
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";
आप इस समस्या को यहाँ हल कर सकते हैं :) http://jsfiddle.net/MqM76/217/
HTML:
<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>मुझे लगता है कि यह भी IE6 में काम करना चाहिए, लेकिन इसके लिए मेरे शब्द नहीं लेते।
आपके उपयोग के मामले के आधार पर, आपको अन्य फ़ंक्शन के लिए समायोजित फ़ंक्शन को बांधने की आवश्यकता हो सकती है। जैसे किसी इनपुट के मान को प्रोग्रामेटिक रूप से बदलना, या तत्व की शैली की displayसंपत्ति को none(जहां scrollWidth === 0) से blockया inline-block, आदि में बदलना ।
मुझे इस समस्या का एक और समाधान मिला है जिसमें JS शामिल नहीं है। HTML में मैंने कुछ इस तरह डाला:
<div>
<input class="input" value={someValue} />
<div class="ghost-input">someValue</div>
</div>
दृश्यता सेट करने के लिए सभी की आवश्यकता है: भूत-इनपुट और चौड़ाई पर छिपा हुआ: इनपुट पर ही 100%। यह काम करता है क्योंकि इनपुट तराजू के 100% कंटेनर की चौड़ाई की गणना ब्राउज़र द्वारा ही की जाती है (उसी पाठ के आधार पर)।
यदि आप इनपुट फ़ील्ड में कुछ पैडिंग और बॉर्डर जोड़ते हैं, तो आपको अपने भूत-इनपुट वर्ग को तदनुसार समायोजित करना होगा (या इनपुट क्लास में कैल्क () का उपयोग करना होगा)।
मेरा 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 जोड़ें)।
उपयोगकर्ता nrabinowitz 'समाधान महान काम कर रहा है, लेकिन मैं keypressइसके बजाय घटना का उपयोग करता हूं keyup। यदि उपयोगकर्ता धीरे-धीरे टाइप करता है तो यह विलंबता को कम करता है।
oninput(या onpropertychangeविरासत IE के लिए) सही घटना है, क्योंकि वे सही क्लिक के साथ चिपकाने या ब्राउज़र के मेनू बार से "फ़ाइल -> पेस्ट" का चयन करने जैसी चीजों का जवाब देते हैं
यहाँ nrabinowitz समाधान का मेरा संशोधन है । मैंने उपयोग नहीं किया आकार की संपत्ति का , क्योंकि यह @Mark के रूप में आनुपातिक फोंट के साथ एकदम सही नहीं है। मेरा समाधान आपके इनपुट के बाद एक तत्व रखता है और ब्राउज़र द्वारा गणना की गई चौड़ाई (jQuery का उपयोग करके) प्राप्त करता है।
हालाँकि मैं इसका परीक्षण नहीं करता, लेकिन मुझे लगता है कि यह तभी काम करेगा जब फ़ॉन्ट को प्रभावित करने वाले सभी 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
GitHub: https://github.com/ozluy/calculate-text-width CodeSandbox: https://codesandbox.io/s/calculate-text-width-okr46