Question

我有一个嵌套在父容器div中的子div。父div具有自己的左，右，顶部，底部，宽度，高度，填充（顶部，右侧，底部，左侧）和边距（顶部，右侧，底部，左侧）CSS属性。

子div还有自己的左，右，顶部，底部，宽度，高度，填充（顶部，右侧，底部，左侧）和边距（顶部，右侧，底部，左侧）CSS属性。

在页面上还有12个文本框，因此用户可以更改子div的CSS属性，如宽度，高度，顶部，左侧，边距（左侧，右侧，顶部，底部）和填充（左侧，右侧，顶部，底部）。但是，我希望用户只输入允许子div在父容器div的边框（左，右，顶部，底部）内移动的值。

任何时候，在用户输入文本框的值后，按Tab键（对于该文本框发生模糊事件），然后调用名为textBoxVerifyUserInput_Blur（this）的Javascript函数。请参阅下面的代码。

* 只要在文本框中输入VALID值，子div就会移动（动态）。否则，用户应该看到针对特定文本框的VALID输入的警报消息。

<div id="divParent" style="width: 500px; height: 400px; top: 100px; left: 50px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; "> 
  <div id="divChild" style="width: 400px; height: 300px; top: 10px; left: 5px; padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; margin-top: 8px; margin-right: 8px; margin-bottom: 8px; margin-left: 8px; "> </div>

</div>

<div id="divInputsForChildDiv">
   <label>12 text boxes for child div property changes</label>
   <br/>
   Child width: &nbsp;<input type="text" id="textboxChildWidth" onblur="textBoxVerifyUserInput_Blur(this);" />
   <br/>
   Child height: &nbsp;<input type="text" id="textboxChildHeigth" onblur="textBoxVerifyUserInput_Blur(this);" />
   <br/>
   ...
    Child margin-left: &nbsp;<input type="text" id="textboxChildMarginLeft" onblur="textBoxVerifyUserInput_Blur(this);" />

</div>

<script language="javascript">
     function textBoxVerifyUserInput_Blur(textbox)
     {
         /* 


    I need the logic over here to be sure that if user input for a text box makes
 the child div going out of the border of the parent div, then alert the user that that 

value is invalid. User sees the alert and then he/she must re-input other value and the 

verification process runs again to check  user input UNTIL  a valid input is entered for this text box.  

If next input is VALID, this function accepts that input, and then the user 

is able to move to ANOTHER text box for another child div CSS property.
         */

      }

     var inputValue = $(this).val();
     if( inputValue makes the child div moving out the parent div borders)  then
        alert('Your input value is invalid, please re-enter');
     else
        accept that input value and let user move to another text box
</script>

我希望有一个方法或公式使用客户端代码（jQuery）作为上面的textBoxVerifyUserInput_Blur（）函数，以防止子div移出父div。

仅将子div元素放在其父容器div的边框内

0 个答案: