У меня есть форма с текстовым полем, который используется для ввода URL-адреса. Мне нужно добавить (http://) в качестве предопределенного значения в это текстовое поле и хочу, чтобы он был только для чтения, чтобы пользователь не смог удалить http://, но после него он может писать.
Любая помощь будет высоко оценена.
Вот несколько вариантов:
Простым способом является просто создать label вне текстового поля (слева) с этими символами. (простой и понятный для пользователя)
Создайте второе текстовое поле для чтения, которое будет использоваться в начале, создайте его так, чтобы оно соответствовало входному и выровняло их рядом друг с другом. Да, вы получите одну пиксельную линию, чтобы разделить их оба, но я думаю, что это добавит к пользовательскому опыту, чтобы было очевидно, что это не для возиться с (я бы лично выбрал эту опцию)
Если вам нужен стиль, вы можете перевернуть свой собственный пользовательский элемент управления, который по мере необходимости использует панель, ярлык и текстовое поле с соответствующим набором стилей. (лучший способ получить нужный стиль)
Четвертый, более раздражающий способ - обработать одно из ключевых событий (например, KeyDown) в самом текстовом поле. С этим вы можете делать многочисленные проверки и изменять позицию каретки, чтобы заставить ее работать, но поверьте мне, это поможет вам в том, чтобы заставить ее работать отлично! (слишком тяжелая работа, чтобы получить право)
Подводя итог, я думаю, что вариант 2 является лучшим здесь. Конечно, если бы вы использовали WPF, у вас, несомненно, было бы намного больше гибкости в дизайне.
Рассматривали ли вы размещение метки рядом с ней с помощью "http://" в качестве текста? а затем, принимая вход пользователя, вы можете просто добавить "http://" с вашим текстовым полем. Текст.
Вот еще одна идея:
В каждом обратном пространстве укажите количество символов в текстовом поле. Если он равен == 7, то игнорируйте обратное пространство. Если он больше, проверьте количество символов после пробела. Если количество символов меньше 7, очистите текстовое поле и reset текст.
private void a_keyPress(object sender, KeyPressEventArgs e)
{
if (e.KeyChar == (char)8)
{
if (myTextbox.Text.Length == 7)
// do stuff..
}
else if //do stuff...
}
Вы также можете даже не отображать http://и просто добавить его в код Textbox.Text. Сначала проверьте, чтобы он не начинался с этого.
Чтобы прояснить мое последнее замечание:
string sURL = txtURL.Text.StartsWith("http://") ? txtURL.Text : "http://" + txtURL.Text;
Что-то вроде этого?
private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
{
var textBox = sender as TextBox;
if (!textBox.Text.StartsWith("http://"))
{
textBox.Text = "http://";
textBox.Select(textBox.Text.Length, 0);
}
}
Вместо этого вы можете использовать RichTextBox, это позволяет защитить текст:
public Form1() {
InitializeComponent();
richTextBox1.Text = "http://";
richTextBox1.SelectAll();
richTextBox1.SelectionProtected = true;
richTextBox1.SelectionStart = richTextBox1.Text.Length;
richTextBox1.DetectUrls = false; // optional
}
Но, к сожалению, это не сработает, если для свойства Multiline установлено значение False.
Прагматичный способ сделать это с помощью TextBox - это просто вернуть его так, как вы хотите. Также работает с удалением пасты и выделения:
string protect = "http://";
private void textBox1_TextChanged(object sender, EventArgs e) {
if (!textBox1.Text.StartsWith(protect)) {
textBox1.Text = protect;
textBox1.SelectionStart = textBox1.Text.Length;
}
}
Примечание. Я неправильно понял вопрос, из-за чего-то я пришел сюда из "HTML" -tag. Но если вы хотите сделать что-то подобное с помощью HTML/CSS, это может быть одним из решений.
Вы можете сделать что-то вроде этого:
<style>
label.mylabel, input.myinput {
display: block;
float: left;
height: 20px;
margin: 0;
padding: 10px 5px 0px 5px;
border: 1px solid #ccc;
font-size: 11px;
line-height: 11px;
}
label.mylabel {
border-right: 0;
}
input.myinput {
border-left: 0;
}
</style>
<label class="mylabel" for="myinput">http://</label>
<input id="myinput" class="myinput" name="myinput" value="">
Таким образом, это имеет два преимущества:
И, конечно же, вы должны добавить "http://" вручную после отправки в форме.
Все это имеет один недостаток. Что, если ваш пользователь хочет вставить 'Https://'?:)
Cheers, Philipp
Если вам нужен подход CSS (в сочетании с фоновым изображением), вы можете попробовать что-то вроде этого:
Enter URL: <input type="text" size="50" class="url" value="www.google.com" />
<style>
input[type="text"].url {
background: url(http://s18.postimage.org/4wkjdpidh/http.png) no-repeat left top transparent;
text-indent: 34px;
}
</style>
Тогда это просто вопрос добавления http:// назад к входному значению при его обработке.
Вы можете поместить ярлык только слева в текстовый текст и установить его свойство text в "http://". или вы можете добавить 2 текстовых поля, которые один читается, только другой не только для чтения. и напишите http://в том, что доступно только для чтения.
Создайте делегат для события keyup (и, возможно, другие, например буфер обмена), и проверьте начало значения.
$('#myField').bind('keypress', function(event)
{
if (event.charCode == 0 && event.currentTarget.value.length <= 7)
{
return false;
}
});