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

jquery html

63985 просмотра

15 ответа

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

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

Автор: Mindtree Источник Размещён: 12.11.2019 09:25

Ответы (15)


33 плюса

это хорошо работает для меня:

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

Автор: guillaumesmo Размещён: 09.11.2013 01:16

15 плюса

Это невозможно. Вы можете поместить значение в поле ввода, но его можно удалить.

Вы можете поместить текст за пределы поля ввода, что защитит его от удаления, но он не будет включен в значение при публикации формы.

Вы можете использовать абсолютное позиционирование, чтобы поместить поле ввода поверх текста, и использовать отступы в поле, чтобы начать печатать после текста. Пример:

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>
Автор: Guffa Размещён: 27.12.2010 12:19

13 плюса

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

Автор: LPChip Размещён: 15.04.2014 02:15

4 плюса

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

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

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

Автор: Blender Размещён: 27.12.2010 12:24

4 плюса

Все проверено!

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

Автор: Darshit Gajjar Размещён: 01.08.2013 12:18

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;
    }
});
Автор: Paul D. Waite Размещён: 27.12.2010 12:12

4 плюса

Проверьте этот формат 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" />

Автор: Do Async Размещён: 24.01.2018 09:19

3 плюса

Чистое решение на основе CSS, которое мы сделали, - div div и комбинация ввода span, пожалуйста, обратитесь к следующему

.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>

Автор: user1208396 Размещён: 19.03.2015 11:24

2 плюса

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

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

Автор: typeof Размещён: 27.12.2010 12:52

1 плюс

Если вы настаиваете на том, чтобы значение http: // было значением по умолчанию, добавьте атрибут «value» во входной тег:

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

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

Автор: robozevel Размещён: 27.12.2010 12:21

1 плюс

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

<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(''));
});
Автор: Himanshu Saini Размещён: 15.12.2014 10:41

0 плюса

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

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

Автор: DVK Размещён: 27.12.2010 12:19

0 плюса

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

Автор: Klogo Gibson Selasi Размещён: 30.01.2017 06:54

0 плюса

ОБНОВЛЕНИЕ: ответ Гийомеса на 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)) 
    }
}
Автор: Angie Alejo Размещён: 07.06.2017 10:37

0 плюса

Это для текстового поля, если пользователь забыл ввести 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;
    }
Автор: Asterisk Размещён: 03.10.2017 12:58
Вопросы из категории :
32x32