Question

我有一个输入框用于电子邮件帐户，它的bg-image是“@ mydomain.com”，位于右侧，用户可以在我的系统中创建自己的电子邮件帐户。

在他们输入用户后，例如“behzad”，我希望输入的bg-image出现在左侧并填充空白区域（如果有）。

例如，某人为用户名键入“x”，并且因为“@ mydomain.com”位于右侧，“x”和“@ mydomain.com”之间有很多可用空间，就像“x（空间太空空间......）@ mydomain.com”我想要那个输入框的模糊，就像这个“x@mydomain.com”。

$('#email-input').blur(function(){
    $(this).css('background', 'new_position')
});

如何根据用户输入字符串宽度确定'new_position'？

Answer 1

我个人喜欢Twitter Bootstrap解决此问题的方法：http://jsfiddle.net/QvR6f/2/

不要使用背景图片，只需将另一个元素粘贴到文本框的末尾即可。

Answer 2

您可以使用与输入框具有相同字体，大小等的隐藏页面元素来执行此操作。您将其内容设置为用户编写的文本，然后读取其宽度。

修改

以下是此技术的示例：http://www.easyjquery.com/onload-fit-input-size-to-length-of-text/

function resizeIt(field) { var measure = $("#measure"); measure.text(field.val()); field.css("width", (measure.width() + 16) + "px"); }

measure将是文档中的一个范围，其格式与输入框相同。 field是您的输入框。

另外我想也许不是使用输入框的背景图像，而是将它放在输入框旁边，这样如果用户写了一个非常长的字符串，它就不会“覆盖”域名。 / p>

Answer 3

以下是我解决这个问题的方法：

$('#username').blur(function(){
    var user_input = $('#username').val();
    $(this).removeClass('email-input');
    $('#username').val(user_input+'@mydomain.com');
});

没有自由空间，而且在没有确定字符串宽度的情况下，我得到了我想要的东西。

谢谢大家。

如何在jQuery中确定字符串的“宽度”

3 个答案: