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

时间:2015-07-14 13:37:05

标签: javascript jquery

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

2 个答案:

答案 0 :(得分:4)

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

$('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>

答案 1 :(得分:0)

使用只有服务器才能看到的隐藏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,虽然隐藏的输入已更改为普通文本输入,因此可以看到结果。