Javascript 根据窗口调整输入文本框的大小和位置_Javascript_Html_Css_Input

Javascript 根据窗口调整输入文本框的大小和位置

javascript html css input

Javascript 根据窗口调整输入文本框的大小和位置,javascript,html,css,input,Javascript,Html,Css,Input,我正在尝试更改文本框的位置，以便在窗口大小更改时，输入框仍在图像中的正确位置。虽然我无法共享图像，但如何确保文本框相对于图像的位置保持不变？我有100个文本框放在某个图像上。包括我现在拥有的。我从绝对像素定位开始，这显然不起作用。非常感谢！如果你需要更多的信息，写一个回复，我可以添加更多的细节 <!DOCTYPE html> <html> <head> <title>Worksheet</title> <style

我正在尝试更改文本框的位置，以便在窗口大小更改时，输入框仍在图像中的正确位置。虽然我无法共享图像，但如何确保文本框相对于图像的位置保持不变？我有100个文本框放在某个图像上。包括我现在拥有的。我从绝对像素定位开始，这显然不起作用。非常感谢！如果你需要更多的信息，写一个回复，我可以添加更多的细节

<!DOCTYPE html>
<html>
<head>
    <title>Worksheet</title>
    <style type="text/css">

        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 50%;
        }

    body {
      background-image: url(A.png);
      background-repeat: no-repeat;;
    }

    input {
      background-color: #fff000
    }
    </style>
  <script type="text/javascript">
    
    function createXTextBoxes(parent, count, ycor, xchange, yessir) {
        var xcor = 0
        for (var i= 0; i < count; ++i) {
          var input = document.createElement("input");
          input.type = "text";
          input.setAttribute("value", yessir);
          input.setAttribute("size", "2");
          input.setAttribute("style","position:absolute ;left:"+(27+xcor)+"%;top:"+ycor+"%");
          input.setAttribute("class","YEET")
          parent.appendChild(input);
          xcor += xchange
      }
    }

    function createAllTextBoxes(parent){
      console.log('Creating text boxes')
      var ychange = 0;
      for (var i=0;i<2;++i){
        createXTextBoxes(parent,13, 30+ychange,3.67,"");
        ychange+=10;
      }
      ychange = 4
      for (var i=0;i<7;++i){
        createXTextBoxes(parent,10, 90+ychange,2,"");
        ychange+=10;
      }
      for (var i=0;i<1;++i){
        createXTextBoxes(parent,4, 90+ychange,2,"");
        ychange+=10;
      }
    }
  </script>
    
</head>
<body onload>
<!--    <img src="A.png" class = "center"> -->
    <form id="main">
    <!--input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:389px'>
    <input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:446px'>
    <input type="text" id="fname" name="fname" size="2" style='position:absolute;top:210px;left:503px'-->
    <input id="clickMe" type="button" value="clickme" onclick="checkAnswers();" />
    <p id="demo"></p>

</body>
<script type="text/javascript">
  var answerkey = [0,1,2,3,4,5,6,7,8,9,10,11,12,
  12,11,10,9,8,7,6,5,4,3,2,1,0,
  5,2,9,6,3,11,4,9,6,12,
  0,1,7,0,1,9,4,5,1,11,
  11,3,8,4,6,12,3,2,10,8,
  0,8,5,7,1,2,5,8,0,7,
  10,7,2,9,12,6,8,1,11,4,
  9,12,4,0,11,3,1,10,2,12,
  6,2,3,8,5,7,12,4,9,6,
  7,5,10,3]
  // answerkey = answerkey.map(String)
  var form = document.getElementById("main");
  createAllTextBoxes(form);

  function checkAnswers(){
    var totalcorrect = 0
    var elements = document.getElementsByClassName("YEET")
    for (var i = 0; i < elements.length; i++) {
      if (elements[i].value != "") {
        if(elements[i].value ==  answerkey[i]){
          // console.log(elements[i].value)
          totalcorrect += 1
        }
    }
      // console.log(elements[i])
      // console.log(answerkey[i])
    }
    console.log(totalcorrect)
    document.getElementById("demo").innerHTML = totalcorrect;
  }

</script>

</html>


工作表
.中心{
显示：块；
左边距：自动；
右边距：自动；
宽度：50%；
}
身体{
背景图片：url（A.png）；
背景重复：不重复；；
}
输入{
背景色：#fff000
}
函数createXtextBox（父、计数、ycor、xchange、yessir）{
var xcor=0
对于（变量i=0；i您可以尝试将此样式用于背景图像
body {     
    background: url(A.png) no-repeat center center fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;      
}

您可以尝试将此样式用于背景图像
body {     
    background: url(A.png) no-repeat center center fixed #000; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;      
}

虽然输入仍然是可滚动的，但图像本身不是，只有当窗口很小时，我才能看到整个图片。可能不是将图像作为背景，而是可以保持原样。您已注释掉的代码。将z索引设为1。并设置文本框（id=demo）可以将z-index设置为100。然后它将叠加在图像上。您需要稍微调整css以获得精确的z-index。我没有尝试过这一点，所以这只是一个建议。虽然输入仍然可以滚动，但图像本身不能滚动，并且只有当窗口很小时，我才能看到整个图像。可能不是将图像作为背景，您可以保持原样。您已注释掉的代码。z索引为1。文本框（id=demo）的z索引可能为100。然后它将叠加在图像上。您需要稍微调整css以获得准确的结果。我没有尝试过，因此这只是一个建议。