第一次学着写javascript类(文本输入变成符号代替)

--学习日志!

好象还是第一次写关于学习的日志,呵呵!

今天遇到一个小问题:就是我们一般网页上输入密码时,都是一个符号来代替的!但是我用手机QQ时

它是先显示一个你输入的,再变成一个符号这样子,

所以我想做一下这个效果,可能在网络上很多信息,也可能对于网络上的高手们来说,很简单!

但我还是想自己写一个类,以后就是属于我自己的类了!

用javascript控制一个文本框的输入内容,然后通过keyup事件去处理用户输入的内容,然后再把用户输入的内容变成一个任意的符号,就OK!　　

想起来很简单,当我把这些做完之后,才发现:用户输入的值去哪了?我一读文本框的值,全是符号!(原来我刚刚是把用户输入的值全部覆盖了),这样肯定是不可行的!于是我又想,我得在覆盖的前面把这个用户输入的值保存起来,这样就应该没问题了.

这样得到的值会是用户每次输入的总和字符(包括我们覆盖的字符),到这里就容易了,再用Replace把里面的字符都去掉就OK...

这个过程没什么问题,但从来没写过类的我,应该怎么去写????

我想了很久..后来看了一个老师写的类的例子(英文),虽然看不大懂,但代码还是能看懂!

花了一点时间边看边写自己的,传值测试..

最终还是成功了,但我不知道这样写是不是最好的!

反正我自己用的瞒好的...

 呵呵!  之后心里感觉很好, 应该说写类的感觉好好!  

看来以后要多多写了...

 

代码:

 

//--------------------------------------------------------------------------//
/*_____________合并字符_____________________*/
function stringBuffer() {
    this._strArray = new Array();
}
stringBuffer.prototype.append = function(str) {
    this._strArray.push(str);
}
stringBuffer.prototype.ToString = function() {
    return this._strArray.join("");
};
stringBuffer.prototype.del = function() {
    this._strArray.splice(0, this._strArray.length);
}

//--------------------------------------------------------------------------//

/////////////////////////////////////////
//*//     文本框输入变符号(类)      ** //
/////////////////////////////////////////

//说明:效果是文本框在输入值的时候可以用一个符号代替
/*
     SfExponentText
*/
function SfExponentText()
{
    this.textbox = null;     //要处理的textbox
    this.sign = "*";            //要代表的符号
    this.strArray = new stringBuffer();//用来放用户每次输入的值
    this.textValue = "";        //用户真正输入的值
    this.timeId= null;          //超时设置
    //this.inIt();                //程序入口
}

//首先要处理键盘的事件
SfExponentText.prototype.textHandEvent = function(oEvent)
{  
    var iKeyCode = oEvent.keyCode;      //键盘事件的健值
    var oText = this;
    var textValue = oText.textbox.value;
    clearTimeout(this.timeId);      //清除超时的ID
    if(iKeyCode == 8 || iKeyCode == 46)
    {
        //如果用户按下的是退格和删除,事件不触发
    }
    else if((iKeyCode != 16 && iKeyCode <32) || (iKeyCode >= 33&& iKeyCode  < 46) || (iKeyCode  >= 122 && iKeyCode <= 123))
    {
        //如果用记按下不是数字和字母键,也不会触发事件
    }
    else
    {
        //在这里触发事件
        this.timeId = setTimeout(function(){
            oText.textSuggstion(textValue);
        },10);
    }
}
/*
    事件处理方法 textSuggstion(textValue) //参数: 当前文本框的value值
*/
SfExponentText.prototype.textSuggstion = function(textValue/* this.textbox.value */)
{
    this.strArray.append(textValue);//保存当前用户输入的值
    var otext = "";
    for(var i =0; i<textValue.length; i++)
    {
        otext += this.sign;     //让符号的长度与用户输入的一致
    }
    this.textbox.value = otext;
    this.returnTextValue(this.strArray.ToString());
}
/*
    返回用户真正输入的值(不是符号)returnTextValue(strArray) //参数:用户每次输入组成的数组
*/
SfExponentText.prototype.returnTextValue = function(str/* string() */)
{
    var re = /\*/g;       //清除*号
    this.textValue = str.replace(re,"");
  //alert(this.textValue);    //得到用户真正输入的值
}

/*
    inIt(textbox)  程序的入口textbox keyup事件 
*/
SfExponentText.prototype.inIt = function(textbox/* 要处理的textbox -- ddocument.getElementsById("") */)
{
    this.textbox = textbox;
    var oThis = this;
    oThis.textbox.onkeyup = function(oEvnet)
    {
        if(!oEvnet)
        {
            oEvnet = window.event;      //得到公用的event;
        }
       
        oThis.textHandEvent(oEvnet);     //把事件做为参数传过去
   }
}