留坑-改变Image属性,javascript keydown

留坑自用，非全部代码！

说明：这段代码节选自我的一个PHP项目中，中间有使用第三方插件，需要使用的请自行baidu。

---

Javascript代码：

<script>
var editor;
KindEditor.ready(function(K) {
  editor = K.create('textarea[name="content"]', {
    uploadJson : '/editor/php/upload_json.php',
    fileManagerJson : '/editor/php/file_manager_json.php',
    allowFileManager : true
  });

    /* 点击按钮时打开上传图像的对话框 */
    K('#image01').click(function() {
        editor.loadPlugin('image', function() {
            editor.plugin.imageDialog({
                imageUrl : K('#picPath01').val(),
                //点击确定按钮时返回图像路径
                clickFn : function(url, title, width, height, border, align) 
                {
                    K('#picPath01').val(url);
                    //还可以在这里加更多的操作
                    editor.hideDialog();
                    changeImage('image01');
                }
            });
        });
    });

    K('#image02').click(function() {
        editor.loadPlugin('image', function() {
            editor.plugin.imageDialog({
                imageUrl : K('#picPath02').val(),
                clickFn : function(url, title, width, height, border, align) 
                {
                    K('#picPath02').val(url);
                    editor.hideDialog();
                    changeImage('image02');
                }
            });
        });
    });

    K('#image03').click(function() {
        editor.loadPlugin('image', function() {
            editor.plugin.imageDialog({
                imageUrl : K('#picPath03').val(),
                clickFn : function(url, title, width, height, border, align) 
                {
                    K('#picPath03').val(url);
                    editor.hideDialog();
                    changeImage('image03');
                }
            });
        });
    });

    K('#image04').click(function() {
        editor.loadPlugin('image', function() {
            editor.plugin.imageDialog({
                imageUrl : K('#picPath04').val(),
                clickFn : function(url, title, width, height, border, align) 
                {
                    K('#picPath04').val(url);
                    editor.hideDialog();
                    changeImage('image04');
                }
            });
        });
    });

    K('#image05').click(function() {
        editor.loadPlugin('image', function() {
            editor.plugin.imageDialog({
                imageUrl : K('#picPath05').val(),
                clickFn : function(url, title, width, height, border, align) 
                {
                    K('#picPath05').val(url);
                    editor.hideDialog();
                    changeImage('image05');
                }
            });
        });
    });

    K('#image06').click(function() {
        editor.loadPlugin('image', function() {
            editor.plugin.imageDialog({
                imageUrl : K('#picPath06').val(),
                clickFn : function(url, title, width, height, border, align) 
                {
                    K('#picPath06').val(url);
                    editor.hideDialog();
                    changeImage('image06');
                }
            });
        });
    });


});

function changeImage($picName) 
{

    switch($picName)
    {
        case "image01":
            var element = document.getElementById('image01');
            if (document.getElementById("picPath01").value!=""){
                element.src = document.getElementById("picPath01").value;
                //document.getElementById("picPath01").value="";
                break;
            }
        case "image02":
            var element = document.getElementById('image02');
            if (document.getElementById("picPath02").value!=""){
                element.src = document.getElementById("picPath02").value;
                break;
            }
        case "image03":
            var element = document.getElementById('image03');
            if (document.getElementById("picPath03").value!=""){
                element.src = document.getElementById("picPath03").value;
                break;
            }
        case "image04":
            var element = document.getElementById('image04');
            if (document.getElementById("picPath04").value!=""){
                element.src = document.getElementById("picPath04").value;
                break;
            }
        case "image05":
            var element = document.getElementById('image05');
            if (document.getElementById("picPath05").value!=""){
                element.src = document.getElementById("picPath05").value;
                break;
            }
        case "image06":
            var element = document.getElementById('image06');
            if (document.getElementById("picPath06").value!=""){
                element.src = document.getElementById("picPath06").value;
                break;
            }
    }
}

function deleteImage($picName) 
{

    switch($picName)
    {
        case "image01":
            var element = document.getElementById('image01');
            document.getElementById("picPath01").value="";
            element.src = "/images/NOPIC_JPG.jpg";
            break;

        case "image02":
            var element = document.getElementById('image02');
            document.getElementById("picPath02").value="";
            element.src = "/images/NOPIC_JPG.jpg";
            break;
        case "image03":
            var element = document.getElementById('image03');
            document.getElementById("picPath03").value="";
            element.src = "/images/NOPIC_JPG.jpg";
            break;
        case "image04":
            var element = document.getElementById('image04');
            document.getElementById("picPath04").value="";
            element.src = "/images/NOPIC_JPG.jpg";
            break;
        case "image05":
            var element = document.getElementById('image05');
            document.getElementById("picPath05").value="";
            element.src = "/images/NOPIC_JPG.jpg";
            break;
        case "image06":
            var element = document.getElementById('image06');
            document.getElementById("picPath06").value="";
            element.src = "/images/NOPIC_JPG.jpg";
            break;
    }
}

function keydown(){         document.getElementById("productTJ").value=Number(document.getElementById("productC").value)*Number(document.getElementById("productK").value)*Number(document.getElementById("productG").value);
    }
</script>

前台代码：

  <form name="addform" id="addform" action="?act=ok" method="post">
    <table cellpadding=0 cellspacing=0 class="table_form" width="100%">
      <tr>
        <td ><font color="red">*</font>产品类别：</td>
        <td id="box_catid">
            <select  id="catid" name="catid" class="input_select">
                <option value="请选择">请选择</option>
                <?php echo get_str(0,$catid);?>
            </select>
          </td>
      </tr>
      <tr>
        <td ><font color="red">*</font>商品名称：</td>
        <td>
            <input type="text" class="input-text" name="title"  id="title"  size="55" value="<?php echo $e_rs['商品名称'];?>" />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;副标题：<input type="text" class="xy_input" name="Subtitle" id="Subtitle" size="54" value="<?php echo $e_rs['副标题'];?>"/>
            <input type="hidden" name="id" value="<?php echo $sxid;?>" />
          </td>
      </tr>
      <tr>
        <td ><font color="red">*</font>品牌：</td>
        <td>
          <input type="text" class="input-text" name="brand"  id="brand"  size="55" value="<?php echo $e_rs['品牌'];?>" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品条码：<input type="text" class="input-text" name="pBarCode"  id="pBarCode" size="14" value="<?php if($e_rs['商品条码']!=''){echo $e_rs['商品条码'];} else { echo "请输入商品条码";}?>" onfocus="javascript:if(this.value=='请输入商品条码')this.value='';" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品编码：<input type="text" class="input-text" name="pNumCode"  id="pNumCode" size="14" value="<?php if($e_rs['商品编码']!=''){echo $e_rs['商品编码'];} else { echo "请输入商品编码";}?>" onfocus="javascript:if(this.value=='请输入商品编码')this.value='';" />
        </td>
      </tr>
      <tr>
        <td ><font color="red">*</font>销售规格：</td>
        <td>
          <input type="text" class="input-text" name="brand"  id="brand"  size="55" value="<?php echo $e_rs['销售规格'];?>" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品条码：<input type="text" class="input-text" name="pBarCode"  id="pBarCode" size="14" value="<?php if($e_rs['商品条码']!=''){echo $e_rs['商品条码'];} else { echo "请输入商品条码";}?>" onfocus="javascript:if(this.value=='请输入商品条码')this.value='';" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商品编码：<input type="text" class="input-text" name="pNumCode"  id="pNumCode" size="14" value="<?php if($e_rs['商品编码']!=''){echo $e_rs['商品编码'];} else { echo "请输入商品编码";}?>" onfocus="javascript:if(this.value=='请输入商品编码')this.value='';" />
        </td>
      </tr>
      <tr>
        <td >正常售价：</td>
        <td><input type="text" class="xy_input90" name="priceZC" id="priceZC" size="30" value="<?php echo $e_rs['正常售价'];?>"/>&nbsp;&nbsp;<span class="remarks">【填写数字,默认单位￥】</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        促销价：<input type="text" class="xy_input90" name="priceCX" id="priceCX" size="30" value="<?php echo $e_rs['促销价'];?>"/>&nbsp;&nbsp;<span class="remarks">【填写数字,默认单位￥】</span>
        </td>
      </tr>
      <tr>
        <td >原产地：</td>
        <td><input type="text" class="xy_input90" name="productCD" id="productCD" size="30" value="<?php echo $e_rs['原产地'];?>"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        生产厂家：<input type="text" class="xy_input" name="productCJ" id="productCJ" size="54" value="<?php echo $e_rs['生产厂家'];?>"/>
        </td>
      </tr>

      <tr>
        <td >保质期：</td>
        <td><input type="text" class="xy_input90" name="EXP" id="EXP" size="30" value="<?php echo $e_rs['保质期'];?>"/>&nbsp;&nbsp;<span class="remarks">【质保天数】</span>
        </td>
      </tr>

      <tr>
        <td >产品信息：</td>
        <td>
        长：
        <input type="text" class="xy_input" name="productC" id="productC" size="5" value="<?php echo $e_rs['长度'];?>" onkeyup="keydown()"/>&nbsp;&nbsp;&nbsp;&nbsp;宽：
        <input type="text" class="xy_input" name="productK" id="productK" size="5" value="<?php echo $e_rs['宽度'];?>" onkeyup="keydown()"/>&nbsp;&nbsp;&nbsp;&nbsp;高：
        <input type="text" class="xy_input" name="productG" id="productG" size="5" value="<?php echo $e_rs['高度'];?>" onkeyup="keydown()"/>&nbsp;&nbsp;【单位：cm】&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;体积：
        <input type="text" class="xy_input" name="productTJ" id="productTJ" size="5" readonly value="<?php echo $e_rs['体积'];?>" style="background:#CCC"/>&nbsp;&nbsp;&nbsp;&nbsp;重量：
        <input type="text" class="xy_input" name="productZL" id="productZL" size="5" value="<?php echo $e_rs['重量'];?>"/>【单位：g】
        </td>
      </tr>

      <tr>
        <td >SEO关键字：</td>
        <td>
        <textarea name="SEOKeyword" rows="4" cols="60" style="font-size:13px;font-family:Tahoma;" id="description" /><?php echo $e_rs['SEO关键字'];?></textarea>&nbsp;&nbsp;&nbsp;&nbsp;SEO简介
        <textarea name="description" rows="4" cols="60" style="font-size:13px;font-family:Tahoma;" id="description" /><?php echo $e_rs['description'];?></textarea>
        </td>
      </tr>

      <tr>
        <td >图片：</td>
        <td id="box_pics" align="left">
            <table width="880px" border="0" cellspacing="0" cellpadding="0" style=" margin-left:-8px">
              <tr>
                <td align="center"><strong>主图1</strong></td>
                <td align="center"><strong>主图2</strong></td>
                <td align="center"><strong>主图3</strong></td>
                <td align="center"><strong>主图4</strong></td>
                <td align="center"><strong>主图5</strong></td>
                <td align="center"><strong>主图6</strong></td>
              </tr>
              <tr>
                <td align="left"><img name="image01" id="image01" src="<?php if ($e_rs['主图1']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图1'];?>" width="125" height="125" onClick="changeImage('image01')" style="border:1px #CCC solid;"><input name="picPath01" id="picPath01" size="55" type="hidden" value="<?php echo $e_rs['主图1'];?>" /></td>
                <td align="left"><img name="image02" id="image02" src="<?php if ($e_rs['主图2']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图2'];?>" width="125" height="125" onClick="changeImage('image02')" style="border:1px #CCC solid;"><input name="picPath02" id="picPath02" size="55" type="hidden" value="<?php echo $e_rs['主图2'];?>" /></td>
                <td align="left"><img name="image03" id="image03" src="<?php if ($e_rs['主图3']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图3'];?>" width="125" height="125" onClick="changeImage('image03')" style="border:1px #CCC solid;"><input name="picPath03" id="picPath03" size="55" type="hidden" value="<?php echo $e_rs['主图3'];?>" /></td>
                <td align="left"><img name="image04" id="image04" src="<?php if ($e_rs['主图4']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图4'];?>" width="125" height="125" onClick="changeImage('image04')" style="border:1px #CCC solid;"><input name="picPath04" id="picPath04" size="55" type="hidden" value="<?php echo $e_rs['主图4'];?>" /></td>
                <td align="left"><img name="image05" id="image05" src="<?php if ($e_rs['主图5']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图5'];?>" width="125" height="125" onClick="changeImage('image05')" style="border:1px #CCC solid;"><input name="picPath05" id="picPath05" size="55" type="hidden" value="<?php echo $e_rs['主图5'];?>" /></td>
                <td align="left"><img name="image06" id="image06" src="<?php if ($e_rs['主图6']=="") {echo "/images/NOPIC_JPG.jpg";} else echo $e_rs['主图6'];?>" width="125" height="125" onClick="changeImage('image06')" style="border:1px #CCC solid;"><input name="picPath06" id="picPath06" size="55" type="hidden" value="<?php echo $e_rs['主图6'];?>" /></td>
              </tr>
              <tr>
                <td align="center"><a onClick="deleteImage('image01')" style="cursor:pointer;">删除</a></td>
                <td align="center"><a onClick="deleteImage('image02')" style="cursor:pointer;">删除</a></td>
                <td align="center"><a onClick="deleteImage('image03')" style="cursor:pointer;">删除</a></td>
                <td align="center"><a onClick="deleteImage('image04')" style="cursor:pointer;">删除</a></td>
                <td align="center"><a onClick="deleteImage('image05')" style="cursor:pointer;">删除</a></td>
                <td align="center"><a onClick="deleteImage('image06')" style="cursor:pointer;">删除</a></td>
              </tr>
            </table>
        </td>
      </tr>
      <tr>
        <td >内容：</td>
        <td id="box_content"><textarea name="content" style="width:860px;height:400px;visibility:hidden;"><?php echo $e_rs['文描内容'];?></textarea></td>
      </tr>
      <tr>
        <td ><font color="red">*</font>发布时间：</td>
        <td id="box_createtime"><input name="c_date" type='text' class="laydate-icon" id="c_date" value="<?php echo date("Y-m-d h:i:s",$e_rs['发布时间']);?>" /></td>
      </tr>
      <tr>
        <td ><font color="red">*</font>产品发布人：</td>
        <td id="box_createtime"><input name="a_author" type='text' id="a_author" class="input-text" size="19" value="<?php echo $e_rs['发布人'];?>" /></td>
      </tr>
      <tr>
        <td >是否推荐商品：</td>
        <td id="box_posid">
            <select id="is_hot" name="is_hot" class="input_select" >
                <option value="0" <?php if($is_hot==0){?> selected="selected"<?php }?>>否</option>
                <option value="1" <?php if($is_hot==1){?> selected="selected"<?php }?>>是</option>
            </select>
        </td>
      </tr>
    </table>
    <div id="bootline"></div>
    <div id="btnbox" class="btn">
      <INPUT TYPE="submit" value="提交" class="button" >
      <input TYPE="reset" value="取消" class="button">
    </div>
  </form>

用到的NOPIC：



效果图如下：