JavaScript Example learning two-class Sina Weibo input box

Source: Internet
Author: User

This case to achieve the following effect, specific to the Sina Weibo website micro-blog release box

Achieve the following effects
Effect 1: When the cursor moves into the text box, the text above the text box changes to show the remaining number of words that can be entered, and when the cursor moves out of the text box and there is no input in the text box, the original default text is restored

Effect 2: Text input, text box prompts the remaining text number, the remaining text word count with the input words and reduce, two letters count a word, a Chinese character counted a word

Effect 3: When the input box is empty, or the text in the input box is more than 140 words, the Publish button is not available, otherwise, when the Publish button is unavailable, click the Publish button, the text box will appear red background, and flashing two times

The corresponding HTML code:

<! DOCTYPE html>"ZH_CN">"UTF-8"> <title> Weibo Publishing box effects </title> <style>Body{font-size:12px} div{width:400px;margin:20px auto;} Div p{float: Right;} Div Textarea{width: -%; height:150px;} Div a{float: right;padding:10px 20px;font-size:16px;background: #0f0; color: #fff;} Div a.disable{background: #ccc; color:#666;} </style>"Div1"> <p> What are they reading? Enterprise # Private Collection List #, leaders ' thought feast </p> <textarea name=""Id=""></textarea> <a href="#" class="Disable"> Release </a> </div> <script src="Js/weiboinput.js"></script></body>Weibo Publishing box HTML code

The corresponding JavaScript code:

//achieve the following effects//effect 1: When the cursor moves into the text box, the text above the text box changes to show the remaining number of words that can be entered//restores the original default text when the cursor moves out of the text box and there is no input in the text box//Effect 2: Text input, text box prompts the remaining text number, the remaining text word count with the input words and reduce, two letters count a word, a Chinese character counted a word//Effect 3: When the input box is empty, or the text in the input box is more than 140 words, the Publish button is not available, otherwise, when the Publish button is unavailable, click the Publish button, the text box will appear red background, and flashing two timesDocument.addeventlistener ('domcontentloaded', function () {varOdiv = document.getElementById ('Div1'); varOP = Odiv.getelementsbytagname ('P')[0]; varOT = Odiv.getelementsbytagname ('textarea')[0]; varOA = Odiv.getelementsbytagname ('a')[0]; //Achieve effect 1Ot.addeventlistener ('Focus', function () {op.innerhtml="You can also enter a <span>140</span> word"; }, false); Ot.addeventlistener ('Blur', function () {if(! This. Value) {op.innerhtml="What are they reading? Enterprise # Private Collection List #, a leader's thought feast"; }    }, false); //achieve effect 2, continuous input is triggered in the standard input event, the Onproperty event is triggered in IEOt.addeventlistener ('input', function () {varOS = Odiv.getelementsbytagname ('span')[0]; varCurlength = Math.ceil (GetLength (ot.value)/2); if(Curlength <= $) {os.innerhtml= $-curlength; } Else{os.innerhtml= Curlength- $; OS.style.color='Red'; }        if(Curlength <=0|| Curlength > $) {Oa.classname='Disable'; } Else{oa.classname="'; }    }, false); function GetLength (str) {returnStr.replace (/[^\x00-\xff]/g,'AA'). length; }    //Achieve Effect 3Oa.addeventlistener ('Click', function () {vartimer; varnum =0; if(Oa.classname = = ='Disable') {            //the background of the text box turns red and flashes two times//clearinterval (timer); //timer = setinterval (function () {//num++; //if (num = = 4) {//clearinterval (timer); //num = 0; //     }            //if (num% 2) {//oT.style.background = ' Pink '; //} else {//oT.style.background = "; //     }            //}, 150); //attempts to use a timeout call to simulate intermittent callscleartimeout (timer); function Changebgcolor () {num++; if(Num >=5) {cleartimeout (timer); Num=0; return; }                if(num%2) {OT.style.background='Pink'; } Else{OT.style.background="'; } Timer= SetTimeout (Changebgcolor, Max); } Timer= SetTimeout (Changebgcolor, Max); } Else{alert ('Weibo has been released! '); }    }, false);}, false);
Micro-blogging box JavaScript code

Harvest:

1. Background flashing! Contact Animation!

2. Text box continuous input event, ie under Onpropertychange, the standard is input

JavaScript Example learning two-class Sina Weibo input box

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.