Question

使用jQuery，我如何将一个默认值http://添加到一个无法删除的输入字段中，但仍允许您在其后键入一个URL？

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

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

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

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

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 3

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

在html中使用以下代码：

＆＃13;

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

＆＃13;

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

＆＃13;

结果将如下所示（从我的脚本中复制结果，因此它不会说http：//）：

enter image description here

请注意，您只需在脚本中添加http：//，但这样可以使其完美运行。

Answer 4

这只是我玩的，但你可以制作文本框的伪扩展名。这个例子基本上是砍掉文本框的左边框，并将假文本框连接到左边。

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

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

Answer 5

全部测试过！

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

Answer 6

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

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

但是如果你已经决定通过JavaScript强制执行该值（并且记住用户可以关闭JavaScript），那么你可以编写一个函数，每当用户在字段中键入时触发，并添加{{1如果它不存在，则到字段的开头。 E.g。

HTML：

http://

的JavaScript：

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

Answer 7

基于纯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;
}

<div class="lable">
  <span class="prefix">971</span>
  <input class="snehainput" type="text" value="" />
</div>

Answer 8

检查此 format 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; }

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

Answer 9

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

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

Answer 10

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

给输入一个 import pandas as pd from statsmodels.tsa.arima_model import ARIMA import warnings warnings.filterwarnings('ignore') df = pd.read_excel('01.xlsx',header=0,parse_dates=[0],index_col=0,squeeze=True) d = pd.date_range(df.index.min(),df.index.max()) df = df[['Close']] df1 = pd.Series(df['Close'],d) df1 = df1.dropna() r = ARIMA(df1,(1,2,0)) model_fit = r.fit(disp=0) pred = model_fit.predict(start = '2012-07-31', end = '2012-09-01' , typ='levels') print(pred) 为前缀腾出空间。并将 a 前缀元素放置在该空间上。

padding-left

.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 设置。

Answer 11

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

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

允许用户根据需要删除它，但验证表单何时发送。（jQuery's validation plugin）

Answer 12

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

<input type="text" name="membership_num" value="0201" id="membership_num">  

//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(''));
});

Answer 13

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

<script>
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://");
}
</script>
<input type='text' name='x' id='x' value='http://' onChange='checkHttp(this)'>

请注意，如果事先没有明确的解释，这种奇怪的行为对用户来说真的很混乱，或者弹出一个（可能是非模态的）解释你为他修正了他的错误。

Answer 14

＆＃13;

$("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://');
  }
});

＆＃13;

<input type="text" value='http://'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

＆＃13;

Answer 15

更新： 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)) 
    }
}

Answer 16

这是针对文本框的，如果用户忘记放入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;
    }

Answer 17

材料UI输入可以接受带有前缀或后缀的输入装饰道具：

https://material-ui.com/api/input-adornment/

<TextField
      label="With normal TextField"
      id="standard-start-adornment"
      className={clsx(classes.margin, classes.textField)}
      InputProps={{
        startAdornment: <InputAdornment position="start">Kg</InputAdornment>,
      }}
    />
    <FormControl className={clsx(classes.margin, classes.withoutLabel, classes.textField)}>
      <Input
        id="standard-adornment-weight"
        value={values.weight}
        onChange={handleChange('weight')}
        endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
        aria-describedby="standard-weight-helper-text"
        inputProps={{
          'aria-label': 'weight',
        }}
      />

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

17 个答案:

HTML：

的JavaScript：