1

我有这个简单的代码：

<input type="text" value="Some Extremely Really Long Word" />

如何确保值（在本例中为“一些非常长的单词”）完全显示（即没有被剪裁）。

我尝试应用样式：overflow:visible 和 display:nowrap 但它不起作用。

我不想应用这样的样式：width: 200px，因为我不知道单词会有多长。

小提琴：http: //jsfiddle.net/TfKbp/3/

4

2 回答 2

3

我过去使用它来动态地将文本INPUT的宽度扩展到其内容的宽度。基本上，您创建一个SPAN具有完全相同的字体系列、字体大小等，并使用该keypress事件来添加字符、测量其大小并调整INPUT.

编辑 1

要根据其初始值动态调整文本框的大小，只需要多一点代码...

HTML

<input id="txtLong" type="text" value="What does the fox say? Ring-ding-ding-ding-dingeringeding! Gering-ding-ding-ding-dingeringeding! Gering-ding-ding-ding-dingeringeding! What the fox say?" />
<span id="spanLong" style="display: none;"></span>

JavaScript

var txtLong = $("#txtLong");
var spanLong = $("#spanLong");

spanLong.text(txtLong.val());
txtLong.css("width", spanLong.width());

txtLong.keypress(function(e){
    if (e.which !== 0 && e.charCode !== 0) {
        var char = String.fromCharCode(e.keyCode | e.charCode);
        spanLong.text(txtLong.val() + char);
        txtLong.css("width", spanLong.width());
    }
});

CSS

input, span {
    padding: 2px 3px;
    font-size: 11px;
    font-family: Sans-serif;
    white-space: pre;
}

新的和改进的小提琴

编辑 2

由于您正在寻找一种通过单击来选择文本的方法，因此我想我还要指出您不一定需INPUT要这样做。看看这个 JSFiddle。作为额外的奖励，它不使用 JQuery。我知道你有点反对。

编辑 3

通过改编这篇博文，我找到了一种仅使用纯 JavaScript 将文本框调整为其初始值宽度的方法。

HTML

<input type="text" id="txtLong" value="Some very long text that all needs to show"/>
<span id="ruler"></span>

JavaScript

String.prototype.visualLength = function()
{
    var ruler = document.getElementById("ruler");
    ruler.innerHTML = this;
    return ruler.offsetWidth;
}

window.onload = function() {
    var txtLong = document.getElementById("txtLong");
    var width = txtLong.value.visualLength();
    txtLong.setAttribute("style", "width:" + width + "px");
}

CSS

#ruler {
    visibility: hidden;
    white-space: nowrap;
}

#txtLong, #ruler {
    font-family: sans-serif;
    font-size: 11pt;
}

JSFiddle

于 2013-10-28T00:35:43.377 回答
0

没有声明方式（我知道）可以做到这一点，但使用 jQuery 很容易做到。您基本上需要做的是制作第二个元素（不是input），其中包含与input. 然后测量第二个元素的宽度，并将宽度设置input为该新宽度。

下面是你如何做到这一点：

HTML：

<input type='text' value='Some Extremely Really Long Word' id='my-input' />

jQuery：

$(document).ready(function() {\

    var $input = $('#my-input'),
        $clone = $('<div></div>');

    $clone.html($input.val());
    $clone.css({
        whiteSpace: 'nowrap',
        font: $input.css('font'),
        paddingLeft: $input.css('padding-left'),
        paddingRight: $input.css('padding-right')
    });
    $clone.appendTo($('body'));
    $input.css({
        width: $clone.width();
    });
    $clone.remove();

})
于 2013-10-28T00:38:52.160 回答