模倣Weibo文字制限効果実装コード_JavaScriptスキル

これが初期状態です

入力された文字列はこのようになります。ここでは角丸と半角を区別し、半角文字は2つとして1つとしてカウントします。

これは素晴らしい外観です

クリック送信を超えると、赤く点滅するプロンプトが表示されます

わかりました。エフェクトは次のようになります。すべて JS で記述されています。 。使用する場合は、忘れずに jq ファイルを追加してください。 。

ここでは限界を超えるためのヒントのみを紹介します。限界を超えた後に余分なものをカットすることもできます。 。ただし、会社のプロジェクトでは使用されておらず、エクスペリエンスは良くないと言われています~~~

コードをコピーコードは次のとおりです:

var oH2 = $("#spetit_word");//プロンプト テキスト
var oTextarea = $("#p_qa_content");//入力ボックス
var oButton = $("#bt-ico"); //ボタン

コードをコピー コードは次のとおりです:

oTextarea.live ("keyup", function () {
Limit(oTextarea, 280, oH2);
})
oButton.live( "クリック", function () {
if (font_count < 0 || font_count == null || font_count == 140) {
Error(oTextarea)
} else {
alert( '正常に公開されました!');

コードをコピーします コードは次のとおりです:

var font_count;

function WordLength(obj) {
var oVal = obj.val(); 🎜>oVal.replace(/n*s*/, '') == '' ? oValLength = 0 : oValLength = oVal.match(/[^ -~]/g) == null ? length oVal.match(/[^ -~]/g).length;
return oValLength
}
function Error(obj) {
var oTimer = null; ;
oTimer = setInterval(function () {
i;
i == 5 ? clearInterval(oTimer) : (i % 2 == 0 ? obj.css("背景色", "# ffffff") : obj.css("background-color", "#ffd4d4")) ;
}, 100);
}
//obj-チェックする入力ボックス、iNow-how多くの単語、tit-prompt box
function Limit(obj, iNow, tit) {
var oValLength = WordLength(obj);
font_count = Math.floor((iNow - oValLength) / 2); 🎜>if (font_count >= 0) {
tit.html("単語も入力できます" font_count "単語");
return true;
tit.html("超過Word");
return false
}
font_count を返す
}