给easyui-input元素添加js原生方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shizheng163/article/details/74423034

前言

当前项目中一直使用easyui框架,现在产品要求将某个easyui-textbox中只能输入数字,又因为easyui-numberbox的前缀0的个数不能做成无限个,所以只能在easyui-textbox的基础上进行修改了。

问题解决后，考虑到刚接触easyui时遇到的一些问题和这个相似，特地总结出来，供大家参考。

原因

easyui的input的元素是在html原生的input元素上进行的一次封装，所以html原生的一些方法在easyui上是不支持的。

例如：想在easyui-textbox的input上使用onkeydown等方法

<input class="easyui-textbox" style="width: 170px;" id="RoomCode" name="Code" onkeydown="return anyOneFunc(event)">

或是:想给textbox增加一个placehoder

<input class="easyui-textbox" style="width: 170px;" id="RoomCode" name="Code" placehoder="123">

以上这两种写法是无效的。

我们通过浏览器的检查元素功能可以发现，添加placehoder的代码会被解析为如下代码：

可以发现直接加的属性加到了easyui 自己的input上而不是我们要的html文本的input上

解决方案

js文件编写函数：

//easyui对象添加属性
function EasyUiAttrProperty(JqueryObj, PropertyName,PropertyValue)
{
    var span = JqueryObj.siblings("span")[0];
    var targetInput = $(span).find("input:first");
    if (targetInput) {
        $(targetInput).attr(PropertyName, PropertyValue);
    }
}

上述代码就是找到html原生的input属性，在进行属性的添加。

调用方式:文本框只允许输入数字

    EasyUiAttrProperty($('#FloorCode'), "onkeyup", "return CheckIsNumber(this);");
    EasyUiAttrProperty($('#FloorCode'), "onafterpaste", "this.value=this.value.replace(/[^1-9]/g,'')");

function CheckIsNumber(obj)
{
    var c = $(obj);
    if (/^[0-9]*$/.test(c.val())==false) {//替换非数字字符
        var temp_amount = c.val().replace(/[^0-9]/g, '');
        $(obj).val(temp_amount);
    }
}