Как я могу добавить неустранимый префикс в поле ввода HTML?
63985 просмотра
15 ответа
Используя jQuery, как я могу добавить значение по умолчанию http://
в поле ввода, которое не может быть удалено, но которое все же позволяет вам вводить URL-адрес после него?
По умолчанию: http: //
Url: http://www.domain.name
Ответы (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);
});
Автор: 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:154 плюса
Это только я играю, но вы можете сделать искусственное расширение текстового поля. Этот пример в основном отсекает левую границу текстового поля и объединяет ложное текстовое поле слева.
Работает только в Chrome AFAICT . Вам нужно будет добавить условные таблицы стилей для каждого браузера, если вы решите использовать этот метод.
Автор: Blender Размещён: 27.12.2010 12:244 плюса
Все проверено!
$('#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://">
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" />
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>
2 плюса
Есть способ сделать это в javascript, но я боюсь, что это больше проблем, чем оно того стоит.
Однако, если вы уверены, что текст не изменится со временем, вы можете использовать фоновое изображение CSS для ввода текста, который является изображением вашего текста 'http: //'. Затем вы можете просто добавить отступ слева до тех пор, пока ввод пользователя не начнется прямо рядом с концом вашего изображения.
Автор: typeof Размещён: 27.12.2010 12:521 плюс
Если вы настаиваете на том, чтобы значение http: // было значением по умолчанию, добавьте атрибут «value» во входной тег:
<input id="url" type="text" value="http://">
Разрешить пользователям удалить его, если они хотят, но проверить, когда форма отправлена. ( плагин проверки jQuery )
Автор: robozevel Размещён: 27.12.2010 12:211 плюс
Не так чисто, но это не позволяет пользователям удалить ваш префикс
<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:190 плюса
$("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>
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
Вопросы из категории :
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- jquery Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?
- jquery Получение идентификатора элемента, который вызвал событие
- jquery Как получить результат из модального диалога в JQuery
- jquery Удалите все классы, начинающиеся с определенной строки.
- jquery Как мне остановить эффект в jQuery
- jquery Как показать загрузочный счетчик в jQuery?
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- html Как вы можете настроить номера в упорядоченном списке?
- html Как поместить пробел перед текстом опции в элементе выбора HTML?
- html Есть ли HTML напротив <noscript>?
- html Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?