Imitation Weibo character restriction effect implementation code_javascript skills

This is the initial state

The input text becomes like this. Here, rounded corners and half-widths will be distinguished, and 2 half-width text will be counted as one.

This is an extraordinary look

If the click submit is exceeded, there will be a red flashing prompt

Okay, the effect is like this, all in js. . If you use it, remember to add a jq file. .

Here are only tips for exceeding the limit. You can also cut off the excess after exceeding the limit. . However, it is not used in company projects, and it is said that the experience is not good~~~

Copy the code The code is as follows:

var oH2 = $("#spetit_word");//Prompt text
var oTextarea = $("#p_qa_content");//Input box
var oButton = $("#bt-ico"); //Button

Copy code The code is as follows:

oTextarea.live ("keyup", function () {
Limit(oTextarea, 280, oH2);
})
oButton.live("click", function () {
if (font_count < 0 || font_count == null || font_count == 140) {
Error(oTextarea);
} else {
alert('Published successfully!');
}
});

Copy code The code is as follows:

var font_count;

function WordLength(obj) {
var oVal = obj.val();
var oValLength = 0;
oVal.replace(/n*s*/, '') == '' ? oValLength = 0 : oValLength = oVal.match(/[^ -~]/g) == null ? oVal.length : oVal.length oVal.match(/[^ -~]/g).length;
return oValLength
}
function Error(obj) {
var oTimer = null;
var i = 0;
oTimer = setInterval(function () {
i;
i == 5 ? clearInterval(oTimer) : (i % 2 == 0 ? obj.css("background-color", "#ffffff") : obj.css("background-color", "#ffd4d4")) ;
}, 100);
}
//obj-the input box to be checked, iNow-how many words, 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("You can also Enter" font_count "Words");
return true;
} else {
tit.html("ExceededWord");
return false;
}
return font_count;
}