Question

我在创建电子邮件地址的文本框时遇到问题，我希望通过示例填写：@ hotmail.com以便只有用户输入实际的标识符，我想在单个文件中执行此操作文本框。可能吗？我记得我在网站的某个地方看过它。

Answer 1

这种方法可以满足您的需求

$('button').on('click',function(){
    var name = $('#in').val();
    var domain = $('#dom').val();
    alert(name + domain);
});

#in{
  border-right:0px;
  margin-right:0px;
  padding-right:0px;
 }
#dom{
  border-left:0px;
  margin-left:-5px;
  padding-left:0px;
  text-align:right;
  width:108px
 }
input{
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="in"/>
<input id="dom" readonly value="@example.com"/>
<button>Subscribe</button>
<p></p>

Answer 2

使用只有服务器才能看到的隐藏input可以轻松伪造此效果。

在您的页面中，添加以下HTML：

<input type='text' id='username'> @hotmail.com
<input name='email' type='hidden' />

并在初始化过程中添加以下内容：

$("#username").bind("blur", function() {
    $("input[name = 'email']").val($(this).val() + "@hotmail.com"); 
});

当焦点从可见焦点丢失时，这将填充隐藏的input，并使用<username>@hotmail.com填充它。

我创建了一个小提琴here，虽然隐藏的输入已更改为普通文本输入，因此可以看到结果。

使用预定义数据创建文本框

2 个答案: