ASP.NETアプリケーションを作成しています。 Webフォームにテキストボックスがあり、ユーザーが入力したものをすべて大文字にしたい。これをフロントエンドで実行したいと思います。また、このテキストボックスには検証コントロールがあるため、ソリューションがASP.NET検証に干渉しないことを確認する必要があります。
説明: CSSテキスト変換により、ユーザー入力が大文字で表示されるようです。ただし、内部では、検証コントロールが失敗するため、小文字のままです。検証コントロールは、有効な状態コードが入力されているかどうかを確認しますが、使用している正規表現は大文字のみで動作します。
CSSとバックエンドを組み合わせて使用してみませんか?使用する:
style='text-transform:uppercase'
textBox、および分離コードでの使用:
Textbox.Value.ToUpper();
小文字と大文字を使用するようにバリデーターの正規表現を簡単に変更することもできます。おそらく、大文字を強制するよりも簡単な解決策でしょう。
テキストボックスでCSSスタイルを使用します。 CSSは次のようになります。
.uppercase
{
text-transform: uppercase;
}
<asp:TextBox ID="TextBox1" runat="server" Text="" CssClass="uppercase"></asp:TextBox>;
**I would do like:
<asp:TextBox ID="txtName" onkeyup="this.value=this.value.toUpperCase()" runat="server"></asp:TextBox>**
キーを押すイベントをインターセプトし、小文字のイベントをキャンセルし、大文字のバージョンを入力に追加できます。
window.onload = function () {
var input = document.getElementById("test");
input.onkeypress = function () {
// So that things work both on Firefox and Internet Explorer.
var evt = arguments[0] || event;
var char = String.fromCharCode(evt.which || evt.keyCode);
// Is it a lowercase character?
if (/[a-z]/.test(char)) {
// Append its uppercase version
input.value += char.toUpperCase();
// Cancel the original event
evt.cancelBubble = true;
return false;
}
}
};
これは、FirefoxとInternet Explorerの両方で機能します。実際にそれを見ることができます here 。
<!-- Script by hscripts.com -->
<script language=javascript>
function upper(ustr)
{
var str=ustr.value;
ustr.value=str.toUpperCase();
}
function lower(ustr)
{
var str=ustr.value;
ustr.value=str.toLowerCase();
}
</script>
<form>
Type Lower-case Letters<textarea name="address" onkeyup="upper(this)"></textarea>
</form>
<form>
Type Upper-case Letters<textarea name="address" onkeyup="lower(this)"></textarea>
</form>
人気のある4つのブラウザーバージョンで、この問題に関する分析を行いました。
私が見つけた答えは、スタイルタグと組み合わせてキーアップでこれを実装することです。
<-- form name="frmTest" -->
<-- input type="text" size=100 class="ucasetext" name="textBoxUCase" id="textBoxUCase" -->
<-- /form -->
window.onload = function() {
var input = document.frmTest.textBoxUCase;
input.onkeyup = function() {
input.value = input.value.toUpperCase();
}
};
今日は似たようなことをしました。変更されたバージョンは次のとおりです。
<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
<script type="text/javascript">
function setFormat() {
var inp = document.getElementById('ctl00_MainContent_txtInput');
var x = inp.value;
inp.value = x.toUpperCase();
}
var inp = document.getElementById('ctl00_MainContent_txtInput');
inp.onblur = function(evt) {
setFormat();
};
</script>
基本的に、スクリプトはテキストボックスがフォーカスを失ったときに発生するイベントを添付します。
style='text-transform:uppercase'
JQueryを使用してこれを行います。
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#txt").keydown(function(e) {
if (e.keyCode >= 65 & e.keyCode <= 90) {
val1 = $("#txt").val();
$("#txt").val(val1 + String.fromCharCode(e.keyCode));
return false;
}
});
});
</script>
/script
フォルダーにjQueryライブラリーが必要です。
text-transformCSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase
CssClass
WebControl.CssClassプロパティ
あなたはそれについてもっと学ぶことができます- https://developer.mozilla.org/en/docs/Web/CSS/text-transform
useStyle="text-transform: uppercase;"
またはCssClass="upper"
検証する前に、フロントエンドにテキスト変換CSSを使用し、文字列サーバー側でtoUpperメソッドを使用します。
ここに私のために働いた解決策があります。
http://plugins.jquery.com/project/bestupper
JavaScriptを http://plugins.jquery.com/files/jquery.bestupper.min.js.txt から取得する必要があります。
チャームのように機能します!
単純な1つのインラインステートメントを使用します
<asp:TextBox ID="txtLocatorName" runat="server"
style="text-transform:uppercase" CssClass="textbox"
TabIndex="1">
</asp:TextBox>
Cssクラスを使用したくない場合は、インラインスタイルステートメントを使用できます(これは目に見えるように大文字にするだけです):)
サーバー側で使用
string UCstring = txtName.Text.ToUpper();
テキストボックスのスタイルを text-transform:uppercase ?として設定します
ここでCSSが役立ちます。
style="text-transform: uppercase";"
これは役立ちますか?
<telerik:RadTextBox ID="txtCityName" runat="server" MaxLength="50" Width="200px"
Style="text-transform: uppercase;">
JavaScriptには、文字列の「toUpperCase()」関数があります。
したがって、これらの線に沿って何か:
function makeUpperCase(this)
{
this.value = this.value.toUpperCase();
}
私はそれが少し遅れていることに気づきましたが、ASP.NET AJAXで動作する良い答えを見つけることができなかったので、上記のコードを修正しました:
function ToUpper() {
// So that things work both on FF and IE
var evt = arguments[0] || event;
var char = String.fromCharCode(evt.which || evt.keyCode);
// Is it a lowercase character?
if (/[a-z]/.test(char)) {
// convert to uppercase version
if (evt.which) {
evt.which = char.toUpperCase().charCodeAt(0);
}
else {
evt.keyCode = char.toUpperCase().charCodeAt(0);
}
}
return true;
}
次のように使用します:
<asp:TextBox ID="txtAddManager" onKeyPress="ToUpper()" runat="server"
Width="84px" Font-Names="Courier New"></asp:TextBox>
$().ready(docReady);
function docReady() {
$("#myTextbox").focusout(uCaseMe);
}
function uCaseMe() {
var val = $(this).val().toUpperCase();
// Reset the current value to the Upper Case Value
$(this).val(val);
}
これは再利用可能なアプローチです。テキストボックスは、名前を付けずにこの方法でいくつでも作成できます。 docReadyのセレクターを変更することで、ページ全体のソリューションを実現できます。
私の例ではフォーカスが失われているため、入力時に質問が特定されませんでした。シナリオで重要な場合は、変更時にトリガーできます。