如何在HTML输入字段中自动添加.com？

Question

我试图获取一个HTML输入表单字段来自动插入＆＃34; .com＆＃34; HTML中的后缀，但我也希望用户能够编辑＆＃34; .com＆＃34;进入他们想要的任何领域。关于我应该怎么做的任何提示？

Answer 1

在输入的blur()事件中检查用户是否输入了域，如果没有添加默认域。我写了一个简单的例子（它并不完美，因为某些域可能无法识别，但它应该给你一般的想法）

示例

$("#myTextBox").on('blur', function (event) {
    var input = $(this).val();
    if (!input.match(/.*\.[a-zA-Z0-9]+$/)) {
        $(this).val(input + ".com")
    }
});

Fiddle Link

Answer 2

你可以通过聪明的作弊来做到这一点！ 的 jsBin demo

• 创建两个contenteditable SPAN，一个用于名称，另一个用于名称 对于域。
• 然后创建一个真实的input，但将其设置为hidden。

知道了吗？

当用户修改了满足的 SPAN ...时 您只需将两个值都发送到隐藏输入。

在表单提交时，隐藏输入的值将被发送到服务器。

$('.webaddress-span').each(function(){
	var $fake = $(this).find("span"),
	    $real = $(this).nextAll(".webaddress-input").first();
	function getNameAndDomain(){
		$real.val( $fake[0].innerHTML +'.'+ $fake[1].innerHTML );
	}
	getNameAndDomain();                  // Do it on DOM ready,
	$fake.on("input", getNameAndDomain); // and on input
});



$("form").on("submit", function(evt) {   // Just to test
  evt.preventDefault();
  alert( $(this).serialize() );
});

.webaddress-span{
  display:inline-block;
  border:1px solid #aaa;
  min-width:150px;
  background:#fff;
}
.webaddress-span span{
  display:inline-block;
  vertical-align:bottom;
  min-height: 1.2em;
  min-width: 0.3em;
  transition: background 0.5s;
  padding-left: 4px;
}
.webaddress-span span + span{
  padding: 0 4px 0 0;
}
.webaddress-span span:hover,
.webaddress-span span:focus{
  background: hsla(200, 70%, 50%, 0.2);
  outline:none;
}
.webaddress-span span {
  white-space: nowrap;
  overflow: hidden;
} 
.webaddress-span span br {
  display:none;
}
.webaddress-span span * {
  display:inline;
  white-space:nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <span class="webaddress-span">
    <span title="name" contenteditable>website</span>.<span title="domain" contenteditable>com</span>
  </span>

  <input hidden class="webaddress-input" name="domain_name" type="text">

  <br><input type="submit" value="Test form">
</form>

NB：以上仍然需要进行一些调整以防止输入密钥，空格等，但您有了一般的想法。