-1

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

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

例如，有人输入“x”作为用户名，由于“@mydomain.com”位于右侧，“x”和“@mydomain.com”之间有很多可用空间，就像“x( SPACE SPACE SPACE SPACE SPACE...)@mydomain.com" 我想要那个输入框的模糊，它就像这样 "x@mydomain.com"。

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

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

4

3 回答 3

3

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

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

于 2012-08-19T08:22:43.977 回答
1

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

编辑：

这是这种技术的一个例子：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是你的输入框。

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

于 2012-08-19T08:21:52.433 回答
0

这是我想出来的方法：

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

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

谢谢大家。

于 2012-08-19T08:30:48.470 回答