ASP.NETはテンセントの微博をまねて“また*の文字を入力することができます”の実現をヒントにします
5192 ワード
textbox TextMode="MultiLine"を設定すると、そのMaxLength設定の値は無効になります.テンセントの薄さ、新浪の薄さのようなヒントの効果(テンセントや新浪の薄さテキストボックスで使うのはtextarea)を達成するために、マウス操作でtextboxの内容を貼り付けたり削除したりすることを考慮しなければ、jqueryのkeyupやkeydownで実現できるようにしてみましょう.jsを使用したタイマー(textboxにフォーカスを当てるとタイマーが「オン」、フォーカスを失うとタイマーが「オフ」)は、マウス操作でtextboxの内容を貼り付けたり削除したりしても文字数を変えることができないという問題をよく解決します
まずheadタグに次のjsコードを追加します.
もちろんjqueryも引用します.js、ここで知ればいいのに!
body編集に追加
まずheadタグに次のjsコードを追加します.
もちろんjqueryも引用します.js、ここで知ればいいのに!
<script>
02
03
var
t =
""
;
04
function
maxLimit() {
05
if
($.trim($(
"#txtContent"
).val()).length > 140) {
06
$(
"#txtleft"
).text(
" "
);
07
$(
"#LabelContent"
).text(($.trim($(
"#txtContent"
).val()).length) - 140);
08
}
09
else
{
10
$(
"#txtleft"
).text(
" "
);
11
$(
"#LabelContent"
).text(140 - ($.trim($(
"#txtContent"
).val()).length));
12
}
13
}
14
15
function
setTimeouts() {
16
maxLimit();
17
t = setTimeout(
"setTimeouts()"
, 1 * 10);
18
};
19
20
function
clearTimeouts() {
21
clearTimeout(t);
22
};
23
24
25
$(document).ready(
function
() {
26
27
//$("#txtContent").keyup(maxLimit);
28
//$("#txtContent").keydown(maxLimit);
29
$(
"#txtContent"
).bind(
"blur"
, clearTimeouts);
30
$(
"#txtContent"
).bind(
"focus"
, setTimeouts)
31
});
32
33
</script>
body編集に追加
<
div
> <
asp:TextBox
ID
=
"txtContent"
runat
=
"server"
Width
=
"500px"
TextMode
=
"MultiLine"
MaxLength
=
"140"
Height
=
"100px"
></
asp:TextBox
></
div
>
<
div
><
span
id
=
"txtleft"
> </
span
><
asp:Label
ID
=
"LabelContent"
runat
=
"server"
ForeColor
=
"Red"
Text
=
"140"
></
asp:Label
><
span
> </
span
></
div
>