Скорректируйте ширину поля ввода к ее входу
<html>
<head>
</head>
<body>
<input type="text" value="1" style="min-width:1px;" />
</body>
</html>
Это - мой код, и он не работает. Есть ли какой-либо другой путь в HTML, JavaScript, PHP или CSS для установки минимальной ширины?
Я хочу поле ввода текста с динамично изменяющейся шириной, так, чтобы жидкости поля ввода вокруг его содержания. Каждый вход имеет встроенное дополнение 2em, это - проблема, и вторая проблема - это min-width не работает над входом вообще.
Если я установил ширину больше, чем она необходима, чем целая программа грязна, мне нужна ширина 1 пкс, больше только если она необходима.
4 ответа
Похоже, вы ожидаете, что стиль будет динамически применяться к ширине текстового поля на основе содержимого текстового поля. В таком случае вам понадобится несколько js для запуска при изменении содержимого текстового поля, например this :
<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
Примечание: это решение работает только тогда, когда каждый символ имеет ширину ровно 8 пикселей .
Я думаю, вы неверно истолковываете свойство CSS min-width . min-width обычно используется для определения минимальной ширины DOM в гибком макете, например:
input {
width: 30%;
min-width: 200px;
}
Это установит минимальную ширину элемента ввода 200 пикселей. В этом контексте «px» означает «пиксели».
Теперь, если вы пытаетесь убедиться, что поле ввода содержит хотя бы один символ , когда пользователь отправляет его, вам необходимо выполнить некоторую проверку формы с помощью JavaScript и PHP. Если это действительно то, что вы пытаетесь сделать, я отредактирую этот ответ и сделаю все возможное, чтобы помочь вам.
Вы можете сделать что-то вроде вот
// HTML
<input id="input" type="text" style="width:3px" />
// jQuery
$(function(){
$('#input').keyup(function(){
$('<span id="width">').append( $(this).val() ).appendTo('body');
$(this).width( $('#width').width() + 2 );
$('#width').remove();
});
});
Чтобы вычислить ширину текущего ввода, вам придется поместить его во временный элемент span, прикрепить его к DOM, получить вычисленную ширину (в пикселях) с помощью свойства scrollWidth и снова удалить span. Конечно, вам нужно убедиться, что в элементе input и в элементе span используется одно и то же семейство шрифтов, размер шрифта и т. д. Поэтому я присвоил им один и тот же класс.
Я привязал функцию к событию keyup, так как при keypress символ ввода еще не добавлен к value, поэтому это приведет к неправильной ширине. К сожалению, я не знаю, как избавиться от прокрутки поля ввода (при добавлении символов в конец поля); оно прокручивается, потому что символ добавляется и отображается до вызова adjustWidthOfInput(). И, как уже было сказано, я не могу сделать это наоборот, потому что тогда значение поля ввода будет перед вставкой нажатого символа. Я постараюсь решить этот вопрос позже.
BTW, я тестировал это только в Firefox (3.6.8), но вы поймете суть, я надеюсь.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Get/set width of <input></title>
<style>
body {
background: #666;
}
.input-element {
border: 0;
padding: 2px;
background: #fff;
font: 12pt sans-serif;
}
.tmp-element {
visibility: hidden;
white-space: pre;
}
</style>
</head>
<body>
<input id="theInput" type="text" class="input-element" value="1">
<script>
var inputEl = document.getElementById("theInput");
function getWidthOfInput() {
var tmp = document.createElement("span");
tmp.className = "input-element tmp-element";
tmp.innerHTML = inputEl.value.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
document.body.appendChild(tmp);
var theWidth = tmp.getBoundingClientRect().width;
document.body.removeChild(tmp);
return theWidth;
}
function adjustWidthOfInput() {
inputEl.style.width = getWidthOfInput() + "px";
}
adjustWidthOfInput();
inputEl.onkeyup = adjustWidthOfInput;
</script>
</body>
</html>