Подтвердить что ты не робот

Как добавить неустранимый префикс в поле ввода HTML?

Используя jQuery, как я могу добавить значение по умолчанию http:// в поле ввода, которое невозможно удалить, но которое по-прежнему позволяет вам вводить URL-адрес после него?

По умолчанию: http://
Url: http://www.domain.name

4b9b3361

ОТВЕТЫ

Ответ 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/

Ответ 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>

Ответ 3

У меня была та же проблема, и я решил ее без использования 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>

Ответ 4

Я видел, что некоторые веб-формы включают это значение вне поля, например.

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

Ответ 5

Это только я играю, но вы можете сделать фальшивое расширение текстового поля. Этот пример в основном прерывает левую границу текстового поля и объединяет поддельное текстовое поле слева.

Работает только в Chrome AFAICT. Вам нужно будет добавить условные таблицы стилей для каждого браузера, если вы решите этот метод.

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

Ответ 6

Все протестированы!

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

Ответ 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>

Ответ 8

Есть способ сделать это в javascript, но я боюсь, что это больше проблем, чем стоит.

Однако, если вы уверены, что текст со временем не изменится, вы можете использовать фоновое изображение CSS для ввода текста, который является изображением вашего текста 'http://', Затем вы можете просто добавить немного padding-left, пока пользовательский ввод не начнется прямо рядом с концом вашего изображения.

Ответ 9

Проверьте этот формат и префиксную реализацию для него:

  • нет смятения
  • гибкость с регулярным выражением
  • любое событие input (клавиатура, мышь, drag-n-drop и т.д.)
  • универсальная утилита (могут быть добавлены дополнительные форматы)
  • проверена ошибка

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

Ответ 10

Если вы настаиваете на том, что "http://" является значением по умолчанию, добавьте атрибут "значение" к тегу ввода:

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

Разрешить пользователям удалять его, если они того пожелают, но подтверждать отправку формы. (плагин проверки jQuery)

Ответ 11

Не очень чистый, но он не позволяет пользователям удалять префикс

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

Ответ 12

Я не уверен в 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)'>

Обратите внимание, что такое странное поведение действительно запутывает пользователя без какого-либо явного объяснения заранее, ИЛИ всплывающее окно (может быть немодальное), объясняющее, что вы исправили его ошибку для него.

Ответ 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://');
  }
});
<input type="text" value='http://'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

Ответ 14

ОБНОВЛЕНИЕ:. Ответ Guillaumesm на Экманск 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)) 
    }
}

Ответ 15

Это для текстового поля, если пользователь забыл поместить 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;
    }