javascript - place a div just below a textbox -
i have searched lot didn't got result satisfying, trying div below text using javascript autocomplete textbox
<input type="text" id="one" onkeyup="suggest(event,this)" /> <p> <input type="text" id="two" onkeyup="suggest(event,this)" /> <p> <input type="text" id="two" onkeyup="suggest(event,this)" /> javascript: function suggest(e,the) { //here want create div , place below textbox on keyispressed } help!
in general not idea attach javascript events html. idea dynamically create div , position below input field think following code work. here jsfiddle http://jsfiddle.net/krasimir/qcxpu/3/
<div class="wrapper"> <input type="text" id="one" class="suggest" /> <p>some text</p> <input type="text" id="two" class="suggest" /> <p>some text</p> <input type="text" id="three" class="suggest" /> </div>
javascript:
var inputs = document.queryselectorall('.suggest'); for(var i=0; field=inputs[i]; i++) { field.addeventlistener('keyup', function(event) { var text = 'you typed: ' + this.value; if(!this.suggestion) { var rect = this.getboundingclientrect(); var left = rect.left; var top = rect.bottom; this.suggestion = document.createelement('div'); this.suggestion.innerhtml = text; this.suggestion.setattribute('style', 'background: #b0b0b0; padding: 6px; position: absolute; top: ' + top + 'px; left: ' + left + 'px;'); this.parentnode.appendchild(this.suggestion); } else { this.suggestion.innerhtml = text; this.suggestion.style.display = 'block'; } }); field.addeventlistener('blur', function(event) { if(this.suggestion) { this.suggestion.style.display = 'none'; } }); }
Comments
Post a Comment