html怎么给单元格加前缀,如何在HTML输入字段中添加不可移除的前缀？

这适合我：

$("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/

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

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

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

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：

http://

我遇到了同样的问题并且在不使用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):

http://

这只是我玩的，但你可以对文本框做一个虚假的扩展。此示例基本上切掉了文本框的左边框，并将假文本框连接到左侧。

仅适用于Chrome AFAICT。如果您决定使用此方法，则必须为每个浏览器添加条件样式表。

http://jsfiddle.net/G9Bsc/1/

全部测试过！

$('#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);

}

});

URL:

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

URL: http://

但是，如果您已经决定通过JavaScript强制执行该值(并且请记住用户可以关闭JavaScript)，那么您可以编写一个函数，每当用户在字段中键入时触发，并将http://添加到如果它不在那里。例如。

HTML：

URL:

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;

}

});

基于纯CSS的解决方案我们做了div包装和跨度输入组合，请参考下面

.lable {

background-color: #dedede;

width: 50%;

padding: 15px;

border: 1px solid #FF0000;

-moz-border-radius: 5px;

border-radius: 5px;

padding: 5px 5px;

}

.snehainput {

background-color: #dedede;

border-left: 1px solid #000000;

border-right: 0px;

border-top: 0px;

border-bottom: 0px;

padding: 2px 5px;

color: #666666;

outline: none;

}

971

有一种方法可以在javascript中执行此操作，但我担心它比它的价值更麻烦。

但是，如果您确定文本不会随时间发生变化，则可以使用CSS背景图像作为文本输入，即文本“http：//”的图像。然后你可以添加一些填充左边，直到用户的输入开始在你的图像结束旁边。

检查此格式util和前缀实现：

没有故障

正则表达式的灵活性

任何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; }

如果您坚持将'http：//'作为默认值，请将“value”属性添加到输入标记：

允许用户根据需要删除它，但验证表单何时发送。 (jQuery的验证插件)

不太干净，但它不允许用户删除您的前缀

//prefix

$(document).on('keyup','#membership_num',function(){

var original = $('#membership_num').val().split('');

original[0] = "0";

original[1] = "2";

original[2] = "0";

original[3] = "1";

$('#membership_num').val(original.join(''));

});

我不确定jQuery，但在简单的JS中，你可以尝试检测字段何时更改，如果更改以某种方式破坏了前缀，将其添加回来(不是100％万无一失 - 如果你想要，你必须放输入字段外的跨度中的“http：//”并以编程方式添加：

function checkHttp(input) {

// See if someone deleted 1 character from needed prefix.

// We can't simply check if the string starts with the prefix

// since the user may have backspaced out 1 character.

input.value = input.value.replace(/^http:///, "");

input.value = input.value.replace(/^http://, "");

input.value = input.value.replace(/^http///, "");

input.value = input.value.replace(/^htt:///, "");

input.value = input.value.replace(/^htp:///, "");

input.value = input.value.replace(/^ttp:///, "");

// This doesn't work if someone deletes - say via cut - >1 character.

input.value = input.value.replace(/^/, "http://");

}

请注意，如果事先没有明确的解释，这种奇怪的行为确实让用户感到困惑，或者弹出一个(可能是非模态的)解释你为他修正了他的错误。

$("input").keyup(function(e) {

var oldvalue = $(this).val();

var field = this;

if (field.value.indexOf('http://') === -1 &&

field.value.indexOf('https://') === -1) {

$(field).val('http://');

}

});

更新：Guillaumesm对Ecmascript 5的回答：

Form.prototype.set_HttpPrefix = function (e) {

if (e.data.$url.val().length < 7) {

e.data.$url.val('http://')

}

else if (e.data.$url.val().indexOf('http://') !== 0) {

e.data.$url.val('http://' + String.fromCharCode(e.which))

}

}

这是用于文本框，如果用户忘记放入http：//那么它将添加，否则它将不会。

if (this.value.length > 7) {

if(this.value.substring(0, 7)== "http://" || this.value.substring(0,

8)== "https://"){

this.value = this.value;

}

else{

this.value = "http://" + this.value;

}