动态调整文本字段宽度到内容

Question

Qooxdoo 有没有办法自动调整 qx.ui.form.TextField 的宽度以适应其内容？这意味着如果有人在文本字段中键入它应该增长，反之亦然。

Answer 1

这是 Qooxdoo playground 中的一个 example 监听输入的更新，使用 canvas 计算文本的长度并调整 textfield 的宽度。

var tt = new qx.ui.form.TextField();
this.getRoot().add(tt);


tt.addListener("input",function(e){
  this.setWidth(parseInt(getTextWidth(e.getData(), "12px Verdana"))+10);
},tt);

function getTextWidth(text, font) {
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

动态调整文本字段宽度到内容

Dynamically adjust Textfield width to Content

qooxdoo