Как назначить входное значение для диапазона Id?

Вот простая программа для создания перетаскиваемого текста в функции изображения. можете ли вы предложить мне получить пользовательский ввод из окна ввода и показать его (перетаскивать) текст, который можно перетаскивать здесь.Как назначить входное значение для диапазона Id?

<!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. PLS помочь мне сделать это.

источник

2016-01-04 Venkadesh S

Вы имели в виду 'Drag Me' вместо' Drag Now'? У вас есть «Drag Me» в вашем коде –

Нет, независимо от того, что я набираю в поле ввода, нужно заменить шрифтом (Drag Me). –

Измените свой код элемента ввода, как показано ниже.

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

Я добавил событие обмена, которое запускается при каждом изменении значения в поле ввода. В этом событии onchange я получил обновленное значение и задал его как значение элемента spangable span.

Fiddle Ссылка: https://jsfiddle.net/7r2007nn/

источник

2016-01-04 04:49:37

[Здесь jsFiddle вашего решения] (https://jsfiddle.net/7r2007nn/). Вы можете включить его в свой ответ. – gibberish

Огромное спасибо .. :) –

Вы можете добавить OnKeyUp событие на вашем поле ввода ... всякий раз, когда ключ нажмите будет обновить пядь элемент

пример

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`) */ 
 
    }

<input type="text" id='input' > 
 
    <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; 
 
document.getElementById('input').onkeyup= function() { 
 
document.getElementById('draggable-element').children[0].innerHTML=this.value; 
 

 
} 
 
</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>

источник

2016-01-04 04:54:35 repzero

Я добавил идентификатор к вашему тегу ввода – repzero

Его работа. Большое вам спасибо. :) –

welcome: D ...... – repzero

Как назначить входное значение для диапазона Id?

ответ

Смежные вопросы