Question

这是在Image功能上创建可拖动文本的简单程序。你可以建议我从输入框中获取用户输入并将其显示为（立即拖动）可在此处拖动的文本。

<!DOCTYPE html>
<html>
<body>
<input type="text" >
<form>
   <select onchange="ChangeBackgroundFont(this,'font');" size="1">
      <option value="0.1">0.1</option>
      <option value="0.25">0.25</option>
      <option value="0.5">0.5</option>
      <option value="0.75">0.75</option>
      <option selected="1.0">1.0</option>
      <option value="1.25">1.25</option>
      <option value="1.5">1.5</option>
      <option value="1.75">1.75</option>
      <option value="2">2</option>
   </select>
   <select name="color" type="text" onchange="ChangeBackgroundFont(this,'background');" >
      <option value="select">Select</option>
      <option value="blue">Blue</option>
      <option value="green">Green</option>
      <option value="white">White</option>
      <option value="black">Black</option>
   </select>
   <div id="draggable-element"> <span id="fontbackgroundTest" style="font-size-adjust: 0.6">Drag Me</span> </div>
</form>
<script type="text/javascript">
        function ChangeBackgroundFont (selectTag,type) {      
          if(type=="font") {     
              // Returns the index of the selected option
              var whichSelected = selectTag.selectedIndex;
              // Returns the selected options values
              var selectState = selectTag.options[whichSelected].text;
              var fontTest = document.getElementById ("fontbackgroundTest");
              if ('fontSizeAdjust' in fontTest.style) {
                  fontTest.style.fontSizeAdjust = selectState;
              } else {
                  alert ("Your browser doesn't support this example!");
              }
            }else{
                document.getElementById("fontbackgroundTest").style.color = selectTag.value;
            }
        }
    </script> 
<img src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/> 
<script>
var selected = null, // Object of the element to be moved
  x_pos = 0,
  y_pos = 0, // Stores x & y coordinates of the mouse pointer
  x_elem = 0,
  y_elem = 0; // Stores top, left values (edge) of the element

// Will be called when user starts dragging an element
function _drag_init(elem) {
  // Store the object of the element which needs to be moved
  selected = elem;
  x_elem = x_pos - selected.offsetLeft;
  y_elem = y_pos - selected.offsetTop;
}

// Will be called when user dragging an element
function _move_elem(e) {
  x_pos = document.all ? window.event.clientX : e.pageX;
  y_pos = document.all ? window.event.clientY : e.pageY;
  if (selected !== null) {
    selected.style.left = (x_pos - x_elem) + 'px';
    selected.style.top = (y_pos - y_elem) + 'px';
  }
}

// Destroy the object when we are done
function _destroy() {
  selected = null;
}

// Bind the functions...
document.getElementById('draggable-element').onmousedown = function() {
  _drag_init(this);
  return false;
};

document.onmousemove = _move_elem;
document.onmouseup = _destroy;
</script>
<style>
 body {
      padding: 10px
    }

    #draggable-element {
      width: 100px;
      height: 10px;
      background-color: #;
      color: black;
      padding: 10px 12px;
      cursor: move;
      position: absolute;
      /* important (all position that's not `static`) */
    }

</style>
</body>
</html>

我知道它很容易，但无法找到更改输入以在span id中反映它的简单方法。请帮我做。

Answer 1

更改您的输入＆＃34;元素代码如下。

<input type="text" id="draggablevalue" onchange="document.getElementById('fontbackgroundTest').innerHTML  = document.getElementById('draggablevalue').value;">

我添加了一个onchange事件，只要输入字段中的值发生更改，就会触发该事件。在此onchange事件中，我已获取更新的值并将其设置为可拖动span元素的值。

小提琴链接：https://jsfiddle.net/7r2007nn/

Answer 2

您可以在输入框中添加onkeyup事件...每按一次键都会更新您的span元素

例如

context.Query

段

document.getElementById('input').onkeyup= function() {
document.getElementById('draggable-element').children[0].innerHTML=this.value;
}

 body {
      padding: 10px
    }

    #draggable-element {
      width: 100px;
      height: 10px;
      background-color: #;
      color: black;
      padding: 10px 12px;
      cursor: move;
      position: absolute;
      /* important (all position that's not `static`) */
    }

如何为span Id分配输入值？

2 个答案: