javascript - 不是把 'value'包裹在输入框里？

Question

我有这个简单的代码:

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

如何确保值(在本例中为“一些非常长的词”)完全显示(即未被剪裁)。

我尝试应用样式:overflow:visible 和 display:nowrap 但它没有用。

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

fiddle :http://jsfiddle.net/TfKbp/3/

Answer 1

我过去曾用它来动态扩展文本的宽度 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;
}

New and Improved Fiddle

---

编辑 2

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

---

编辑 3

我找到了一种方法，通过调整 this blog post，仅使用纯 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