前言

當前專案中一直使用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);
    }
}