私はc#を使用してasp.netでWebアプリケーションを開発しているので、Webアプリケーションにasp:textboxを配置しました。ページを読み込んでいるときに、テキストボックスにデフォルトのテキストを入れたいのですが、カーソルをその上に置いて最初の文字を入力すると、テキストボックスがテキストボックスからクリアになります。
4 に答える
あなたが求めているのは透かしと呼ばれるものです。それを行うには非常に多くの方法があります
次のようなサードパーティのツール:
を。Ajax ツールキット。あなたはここで実際にそれを見ることができます
b. Telerik RadTextBox コントロール (そのEmptyMessageプロパティを設定することにより) 。
などなど。
以下のような単純な JavaScript を使用して、自分で作成できます。
<script>
$(document).ready(function() {
var watermark = 'textbox watermark text';
$('#inputTextboxId').blur(function(){
if ($(this).val().length == 0)
$(this).val(watermark).addClass('watermark');
}).focus(function(){
if ($(this).val() == watermark)
$(this).val('').removeClass('watermark');
}).val(watermark).addClass('watermark');
});
</script>
コンテナの中に入力コントロールを配置します
<body>
<input id="inputTextboxId" type="text" />
</body>
また、作業領域全体が HTML5 対応のブラウザーにある場合は、次のようにします。
<input type="text" placeholder="Enter your name...">
テキストボックスには「名前を入力してください...」という透かしがあり、フォーカスすると消えます。
以下のコードを試してみてください。問題を解決するのに役立ちます
<asp:TextBox ID="Textbox"
CssClass="Input"
onfocus="if(this.value == 'Name'){this.value='';}"
onblur="if(this.value == ''){this.value='Name';}"
Width="300"
runat="server"
text="Name" />
別の代替手段はHTML5 プレースホルダー タグですが、これはすべてのブラウザーで完全にサポートされているわけではありません。
@Jon Malcolmが提案したjavascriptの代替をお勧めします。
これは、 AjaxControlToolkitのTextBoxWatermark エクステンダを使用して行うことができます。AjaxControlToolkit をプロジェクトに追加し (Nuget を使用するのが最も簡単な方法です)、マークアップで次のように表示するテキストを指定できます。
<asp:textbox runat="server" id="MyTextBox" />
<ajaxtoolkit:TextBoxWatermarkExtender runat="server" id="MyTextBoxExtender" TargetControlId="MyTextBox" WatermarkText="Default Text" />
または、jQuery Watermark プラグインを使用してこれを行うこともできます。これを実装する方法の詳細については、この質問への回答を参照してください。