创建包含预定义数据的文本框

Creating a textbox with predefined data

本文关键字：文本 数据 包含 预定义 创建      更新时间：2023-09-26

我面临的问题在创建一个文本框的电子邮件地址，我想已经填满的例子:@hotmail.com，这样只有实际的标识符由用户输入，我想在一个单一的文本框中做到这一点。这可能吗?我记得我在一些网站上看到过

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

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

$(document).ready(function(){
    $('input').blur(function(){
	    var mailname=$(this).val();
	    var mailprovider=$('span').text();
	    alert(mailname+mailprovider);
    });
});
#uname{
    padding:7px;
    width:256px;
    height:20px;
    float:left;
    position: relative;
    border:1px solid #ccc;
    border-right:none;
}
span.hid {
    text-align: center;
    display:inline-block;
    position: relative;
    font-size:15px;
    padding:6px;
    border:1px solid #ccc;
    border-left:none;
    right:15px;
    width:120px;
    height:22px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name" id="uname" value=""><span class="hid">@hotmail.com</span>

这种效果很容易使用隐藏的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填充它。

我在这里创建了一个fiddle，尽管将隐藏输入更改为普通文本输入，以便可以看到结果。

相关文章：