如何在HTML输入字段中添加不可移除的前缀？

Question

使用jQuery,如何将一个默认值添加http://到一个无法删除的输入字段中,但是仍然可以在之后输入一个URL？

默认值:http://
Url:http://www.domain.name

Answer 1

这适合我:

$("input").keydown(function(e) {
var oldvalue=$(this).val();
var field=this;
setTimeout(function () {
    if(field.value.indexOf('http://') !== 0) {
        $(field).val(oldvalue);
    } 
}, 1);
});

http://jsfiddle.net/J2BKU/

Answer 2

检查此格式工具及其前缀实现：

• 没有故障
• 正则表达式的灵活性
• 任何input事件（键盘、鼠标、拖放等）
• 通用实用程序（可以添加额外的格式化程序）
• 错误测试

// Util function
function addFormatter (input, formatFn) {
  let oldValue = input.value;
  
  const handleInput = event => {
    const result = formatFn(input.value, oldValue, event);
    if (typeof result === 'string') {
      input.value = result;
    }
    
    oldValue = input.value;
  }

  handleInput();
  input.addEventListener("input", handleInput);
}

// Example implementation
// HOF returning regex prefix formatter
function regexPrefix (regex, prefix) {
  return (newValue, oldValue) => regex.test(newValue) ? newValue : (newValue ? oldValue : prefix);
}

// Apply formatter
const input = document.getElementById('link');
addFormatter(input, regexPrefix(/^https?:\/\//, 'http://'));

input { padding: 0.5rem; font-size: 1rem; }

<input type="text" id="link" />

Answer 3

那是不可能的.您可以在输入字段中输入值,但可以将其删除.

您可以将文本放在输入字段之外,以防止其被删除,但在发布表单时它不会包含在值中.

您可以使用绝对定位将输入字段放在文本的顶部,并在字段中使用填充,以便您在文本后面开始键入.例:

CSS:

.UrlInput { position: relative; }
.UrlInput label { position: absolute; left: 3px; top: 3px; color: #999; }
.UrlInput input { position: absolute; left: 0; top: 0; padding-left:40px; }

HTML:

<div class="UrlInput">
  <label>http://</label>
  <input name="Url" type="text" />
</div>

Answer 4

我遇到了同样的问题并且在不使用jquery的情况下解决了它,只需简单的CSS和HTML.该解决方案看起来很优雅,用户将立即了解它的工作原理.

在html中使用以下代码:

span.textbox {
	    background-color: #FFF;
	    color: #888;
	    line-height:20px;
	    height:20px;
	    padding:3px;
	    border:1px #888 solid;
	    font-size:9pt;
}
    
span.textbox input {
      border: 0px;
	    background-color: #FFF;
  }

 (short title): 
    <span class="textbox"> 
        http://
        <input type="text" name="url" autofocus />
    </span>

    

结果将如下所示(从我的脚本中复制结果,因此它不会说http://):

请注意,您只需在脚本中添加http://,但这将使其完美运行.

Answer 5

我已经看到一些网络表单在字段之外包含这个值，例如

<label for="url">URL:</label> http:// <input id="url" type="text">

但是，如果您一心想通过 JavaScript 强制执行该值（请记住，用户可以关闭 JavaScript），您可以编写一个函数，每次用户在该字段中键入时都会触发该函数，并添加http://到该字段的开头如果它不在那里。例如

HTML：

<label for="url">URL:</label> <input id="url" type="text" value="http://">

 JavaScript：

$('#url').keyup(function(){

    if( this.value.indexOf('http://') !== 0 ){ 
        // Add lots more code here so that this actually works in practice.    
        // E.g. if the user deletes only some of the “http://”, if the 
        // user types something before the “http://”, etc...
        this.value = 'http://' + this.value;
    }
});

Answer 6

这是一个仅 HTML 和 CSS 的选项，在我看来，它比任何其他答案都更清晰。

给输入 apadding-left以便为前缀腾出空间。并将 a 前缀元素放置在该空间上。

.prefix {
  position: relative;
  right: -3px;
  color: grey;
}

input.has-prefix {
  padding-left: 50px;
  margin-left: -50px
}

<span class="prefix">https://</span>
<input class="has-prefix" type="text">

根据您想要对齐<input>元素的方式，您可以相应地调整前缀的right位置和输入的margin-left设置。

Answer 7

都经过测试！

$('#myUrl').keyup(function(e) {
  if (this.value.length < 7) {
    this.value = 'http://';
  } else if (this.value.indexOf('http://') !== 0) {
    this.value = 'http://' + String.fromCharCode(e.which);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myUrl">URL:</label>
<input id="myUrl" type="text" value="http://">