URLを入力するために使用されるテキストボックスが記載されたフォームがあります。このテキストボックスに事前定義された値として(http://)を追加し、読み取り専用にして、ユーザーがhttp://を削除できないようにする必要がありますが、その後に書き込むことはできます。
どんな助けでも大歓迎です。
ここにいくつかのオプションがあります:
簡単な方法は、テキストボックスの外側(左側)にこれらの文字を使用してラベルを作成することです。(ユーザーにとってシンプルでわかりやすい)
最初に使用する2番目の読み取り専用テキストボックスを作成し、入力に一致するようにスタイルを設定し、それらを隣り合わせに配置します。はい、両方を分割するために1つのピクセル線が表示されますが、これによりユーザーエクスペリエンスが向上し、これが混乱するためのものではないことが明らかになると思います(私は個人的にこのオプションを選択します)
スタイルが必要な場合は、パネル、ラベル、テキストボックスを使用する独自のユーザーコントロールをロールし、必要に応じて適切な境界線のスタイルを設定できます。(必要なスタイルを正確に取得するための最良の方法)
4番目の、より厄介な方法は、テキストボックス自体でキーイベントの1つ(KeyDownなど)を処理することです。これを使用すると、多数のチェックを実行し、キャレットの位置を変更して機能させることができますが、これで完全に機能するようになります。(うまくいくにはあまりにも大変な作業です)
要約すると、ここではオプション2が最適だと思います。もちろん、WPFを使用している場合は、間違いなくスタイリングの柔軟性が大幅に向上します。
その横に「http://」をテキストとしてラベルを付けることを検討しましたか?次に、ユーザー入力を受け入れるときに、textbox.Textに「http://」を追加するだけです。
ここに別のアイデアがあります:
バックスペースを押すたびに、テキストボックスの文字数を数えます。== 7の場合、バックスペースを無視します。それより大きい場合は、バックスペースの後の文字数を確認してください。文字数が7未満の場合は、テキストボックスをクリアしてテキストをリセットします。
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」タグからここに来ていたため、質問を読み違えました。しかし、HTML/CSS でこのようなことをしたい場合は、これが 1 つの解決策になる可能性があります。
次のようなことができます。
<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="">
したがって、これには 2 つの利点があります。
もちろん、フォームを送信した後、「http://」を手動で追加する必要があります。
全体に1つの欠点があります。ユーザーが「https://」を挿入したい場合はどうなりますか? :)
乾杯、フィリップ
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://
、入力値を処理するときに、入力値の前に後ろを追加するだけです。
textboxt にラベルを置いて、その text プロパティを "http://" に設定できます。または、1 つが読み取り専用で、もう 1 つが読み取り専用ではない 2 つのテキスト ボックスを追加できます。読み取り専用のものに http:// を書き込みます。
keyup
イベント(および場合によってはクリップボードなどの他のイベント)のデリゲートを作成し、値の開始を確認します。
$('#myField').bind('keypress', function(event)
{
if (event.charCode == 0 && event.currentTarget.value.length <= 7)
{
return false;
}
});