I have the following code. When I press the down/up key, i can successfully select the different value but the focus is still on the main input box. I want to move focus to the selected element. That is if i press down key and if selected element is John Doe, then the focus should also be on John doe element and not on the input box.
I set the following 2 things in the code but they are not working
$selected.focus();
and
$current.focus();
What am I doing wrong ?
You can't just focus() a <li> element. From the docs:
The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (<input>, <select>, etc.) and links (<a href>). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.
You can try setting the tabindex property.
LIVE DEMO
I have added a counter variable , and if counter > 1 then only key Up, Down, Enter method calls, also on Enter Hit again i am setting counter=0 so you get last selected Li. Instead of calling removeClass('selected') everytime, i am calling it only if my counter >1.
$(document).ready(function () {
var $listItems = $('li.autocomplete-list'),
$div = $('div.autofill'),
$input = $('#example');
$div.hide();
var allLI = $(".autocomplete .autocomplete-list");
var counter = 0;
$('input#example').on('keydown', function (e) {
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
//console.log("Show");
$div.show();
counter++;
if (counter > 1) {
if (key == 40) { // Down key
$selected.focus();
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
} else if (key == 38) { // Up key
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
} else if (key == 13) {
var value = $selected.text().split('(')[0].trim();
$input.val(value);
$div.hide();
counter = 0;
}
if ($current) {
allLI.removeClass('selected');
$current.addClass('selected');
$current.focus();
}
}
});
$('li.autocomplete-list').on('click', function (e) {
var value = $(this).text().split('(')[0].trim();
$input.val(value);
$div.hide();
});
$('li.autocomplete-list').hover(
function () {
$(this).addClass('partial_selected')
},
function () {
$(this).removeClass('partial_selected')
});
});
You need to explicitly assign tabindex property for the list items if you want to focus on them. see http://jsfiddle.net/tkay/40ctx17s/1/ . But a downside to this is you will not be able to move further down in the list since input is not focused.
$(document).ready(function () {
var $listItems = $('li.autocomplete-list'),
$div = $('div.autofill'),
$input = $('#example');
$div.hide();
$('input#example').on('keydown', function (e) {
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
$div.show();
$listItems.removeClass('selected');
if (key == 40) { // Down key
$selected.focus();
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
} else if (key == 38) { // Up key
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
} else if (key == 13) {
var value = $selected.text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
if ($current) {
$current.addClass('selected');
$current.focus();
console.log($current);
}
});
$('li.autocomplete-list').on('click', function (e) {
var value = $(this).text().split('(')[0].trim();
$input.val(value);
$div.hide();
});
$('li.autocomplete-list').hover(
function(){ $(this).addClass('partial_selected') },
function(){ $(this).removeClass('partial_selected') }
);
});
.selected {
background: #a4a4a4;
}
.hover {
background: #A9D0F5;
}
ul {
padding: 5px 0;
}
li {
padding: 6px 3px;
}
.autofill {
width: 250px;
}
.input {
width: 250px;
height: 2.2em;
padding: .3em .5em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" class="input" name="example" id="example" placeholder="example..." autocomplete="off" list="examplelist" />
<div class="autofill">
<ul class="autocomplete">
<li class="autocomplete-list" tabindex="-1">John Doe (San Jose, CA)</li>
<li class="autocomplete-list" tabindex="-1">Jane Doe (San Francisco, CA)</li>
<li class="autocomplete-list" tabindex="-1">John Jane (San Carlos, CA)</li>
</ul>
</div>
Updated Answer after comments of OP
$(document).ready(function () {
var $listItems = $('li.autocomplete-list'),
$div = $('div.autofill'),
$input = $('#example');
$div.hide();
$('input#example').on('keydown', function (e) {
var key = e.keyCode,
$selected = $listItems.filter('.selected'),
$current;
$div.show();
$listItems.removeClass('selected');
if (key == 40) { // Down key
$selected.focus();
if (!$selected.length || $selected.is(':last-child')) {
$current = $listItems.eq(0);
} else {
$current = $selected.next();
}
} else if (key == 38) { // Up key
if (!$selected.length || $selected.is(':first-child')) {
$current = $listItems.last();
} else {
$current = $selected.prev();
}
} else if (key == 13) {
if ($selected.length){
e.preventDefault();
}
var value = $selected.text().split('(')[0].trim();
$input.val(value) ;
$div.hide();
}
if ($current) {
$current.addClass('selected');
}
});
$('li.autocomplete-list').on('click', function (e) {
var value = $(this).text().split('(')[0].trim();
$input.val(value);
$div.hide();
});
$('li.autocomplete-list').hover(
function(){ $(this).addClass('partial_selected') },
function(){ $(this).removeClass('partial_selected') }
);
$("#frm").submit(function(){
console.log('submitted');
});
});
.selected {
background: #a4a4a4;
}
.hover {
background: #A9D0F5;
}
ul {
padding: 5px 0;
}
li {
padding: 6px 3px;
}
.autofill {
width: 250px;
}
.input {
width: 250px;
height: 2.2em;
padding: .3em .5em;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="frm">
<input type="text" class="input" name="example" id="example" placeholder="example..." autocomplete="off" list="examplelist" />
<input type="submit" value="Submit"/>
</form>
<div class="autofill">
<ul class="autocomplete">
<li class="autocomplete-list">John Doe (San Jose, CA)</li>
<li class="autocomplete-list">Jane Doe (San Francisco, CA)</li>
<li class="autocomplete-list">John Jane (San Carlos, CA)</li>
</ul>
</div>
Related
I am working on a autocomplete feature and to populate in on a list currently the list is just showing the results but I can't select them to add it to the input element.
Here is a sample of the code:
var search_terms = ['a', 'b', 'c'];
function autocompleteMatch(input) {
if (input == '') {
return [];
}
var reg = new RegExp(input);
return search_terms.filter(function(term) {
if (term.match(reg)) {
return term;
}
});
}
function showResults(val) {
res = document.getElementById("result");
res.innerHTML = '';
let list = '';
let terms = autocompleteMatch(val);
for (i = 0; i < terms.length; i++) {
list += '<li>' + terms[i] + '</li>';
}
res.innerHTML = '<ul>' + list + '</ul>';
}
<input type="text" class="form-control" placeholder="Explain in fewer words with the primary product key word (Eg: OneDrive sync issue, etc.)" name="post" required id="id_post" onKeyUp="showResults(this.value)">
<span class="fas fa-asterisk" style="font-size:12px;color:red;position:absolute; right:20px;top:12px;" id="asterix"></span>
<div id="result"></div>
Any advice to add the elements on list to the input. I've search for similar suggestions but I couldn't apply the answers to my code.
Edit: In my case the solutions posted here were not working because the calling of the script
<script type="text/javascript" src="app.js" charset="utf-8"></script>
was at the top. So it was failing with a Uncaught TypeError: Cannot read property 'addEventListener' of null. After moving <script> section to the end of the <body> suggested answers started to work.
Is this how it should work. I added an event listener to res that tests id a <li> was clicked. If so, the innerHTML of the <li> is inserted as value in the <input>. Using the dispatchEvent() I update the list as if it was a keyup event.
var search_terms = ['abc', 'abcde', 'abde'];
var res = document.getElementById("result");
var id_post = document.getElementById("id_post");
function autocompleteMatch(input) {
if (input == '') {
return [];
}
var reg = new RegExp(input)
return search_terms.filter(function(term) {
if (term.match(reg)) {
return term;
}
});
}
function showResults(val) {
let terms = autocompleteMatch(val);
list = terms.map(term => `<li>${term}</li>`).join('');
res.innerHTML = '<ul>' + list + '</ul>';
}
res.addEventListener('click', e => {
if(e.target.nodeName == "LI"){
id_post.value = e.target.innerHTML;
id_post.dispatchEvent(new Event('keyup'));
}
});
<input type="text" class="form-control" placeholder="Explain in fewer words with the primary product key word (Eg: OneDrive sync issue, etc.)" name="post" required id="id_post" onKeyUp="showResults(this.value)">
<div id="result"></div>
Considering your original code there are some missing details like autocomplete function and keyboard events (up/down/enter).
1) HTML
// form (autocomplete off) disables autocomplete integration with external tools like 1password
<form autocomplete="off">
<div class="autocomplete" id="autocomplete-container">
<input id="autocomplete-input" type="text" placeholder="Type Something...">
</div>
<input type="submit">
</form>
2) List of possible options (to make it dynamic, load the list before binding it to the autocomplete method)
const data = ["Aaa", "Aab", "Aac", "Abc", "Bbc", "Bbd", "Xpto", "Item1", "Item2", "SomethingElse"];
3) Autocomplete Functionality
const autocomplete = (container, inputElement, list) => {
var currentFocus = -1;
inputElement.addEventListener('input', () => {
var autocompleteText = inputElement.value;
hideList();
if (!autocompleteText) {
return false;
}
const autocompleteList = document.createElement('div');
autocompleteList.setAttribute('id', 'autocomplete-list');
autocompleteList.setAttribute('class', 'autocomplete-items');
container.appendChild(autocompleteList);
list.forEach((item, index) => {
if (
item.substr(0, autocompleteText.length).toUpperCase() ===
autocompleteText.toUpperCase()
) {
const tempId = `hiddenInput_${index}`;
const text = item.substr(0, autocompleteText.length);
const autocompleteMatch = document.createElement('div');
autocompleteMatch.innerHTML = `<strong>${text}</strong>`;
autocompleteMatch.innerHTML += item.substr(autocompleteText.length);
autocompleteMatch.innerHTML += `<input type='hidden' id='${tempId}' value='${item}'>`;
autocompleteMatch.addEventListener('click', (event) => {
const clickedElement = event.target.getElementsByTagName('input')[0];
inputElement.value = clickedElement.value;
hideList();
});
autocompleteList.appendChild(autocompleteMatch);
}
});
});
inputElement.addEventListener('keydown', function (e) {
const autoCompleteList = document.getElementById('autocomplete-list');
var autoCompleteDiv;
if (autoCompleteList) {
autoCompleteDiv = autoCompleteList.getElementsByTagName('div');
}
if (e.keyCode === 40) {
// KEY DOWN
currentFocus++;
addActive(autoCompleteDiv);
} else if (e.keyCode === 38) {
// KEY UP
currentFocus--;
addActive(autoCompleteDiv);
} else if (e.keyCode === 13) {
// ENTER
e.preventDefault();
if (currentFocus > -1 && autoCompleteDiv) {
autoCompleteDiv[currentFocus].click();
}
}
});
const addActive = (item) => {
if (!item) {
return false;
}
removeActive(item);
if (currentFocus >= item.length) {
currentFocus = 0;
}
if (currentFocus < 0) {
currentFocus = item.length - 1;
}
item[currentFocus].classList.add('autocomplete-active');
};
const removeActive = (autoCompleteItems) => {
Array.from(autoCompleteItems).forEach((item) => {
item.classList.remove('autocomplete-active');
});
};
const hideList = (element) => {
var autoCompleteItems =
document.getElementsByClassName('autocomplete-items');
if (autoCompleteItems && autoCompleteItems.length > 0) {
Array.from(autoCompleteItems).forEach((item) => {
if (element !== item && element !== inputElement) {
item.parentNode.removeChild(item);
}
});
}
};
document.addEventListener('click', (event) => hideList(event.target));
};
// this part binds the autocomplete with the HTML
window.addEventListener('load', function () {
const container = document.getElementById('autocomplete-container');
const inputElement = document.getElementById('autocomplete-input');
autocomplete(container, inputElement, data);
});
CSS
* { box-sizing: border-box; }
body {
font: 16px Arial;
}
.autocomplete {
display: inline-block;
position: relative;
width: 300px;
}
input {
border: 1px solid transparent;
background-color: #f1f1f1;
padding: 10px;
font-size: 16px;
}
input[type=text] {
background-color: #f1f1f1;
width: 100%;
}
input[type=submit] {
background-color: DodgerBlue;
color: #fff;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
.autocomplete-active {
background-color: DodgerBlue !important;
color: #ffffff;
}
Based on W3School - How TO - Autocomplete
Live Version - Codesandbox
Try This Code
var searchTerms = ["OneDrive sync issue", "Abcde", "123456"];
var result = document.getElementById("result");
rul = document.createElement("ul");
result.appendChild(rul);
rul.classList.add("datalist");
for(var x = 0; x < searchTerms.length; x++ ){
rli = document.createElement("li");
rul.appendChild(rli);
rli.innerHTML = searchTerms[x];
rli.classList.add("d-none");
rli.addEventListener("click", function(){
document.getElementById("id_post").value = this.innerHTML;
this.classList.add("d-none");
});
}
function showResults(v){
var ListItems = rul.querySelectorAll("li");
for(var i = 0; i < ListItems.length; i++){
var c = ListItems[i].innerHTML.toLowerCase();
v = v.toLowerCase();
if(c.indexOf(v) > -1 && v !== ""){
ListItems[i].classList.remove("d-none");
}
else{
ListItems[i].classList.add("d-none");
}
}
}
.d-none{ display:none; }
.datalist li{ cursor:pointer; }
<input
type="text"
class="form-control"
placeholder="Explain in fewer words with the primary product key word (Eg: OneDrive sync issue, etc.)"
name="post"
required
id="id_post"
onKeyUp="showResults(this.value)">
<span
class="fas fa-asterisk"
style="font-size:12px;color:red;position:absolute; right:20px;top:12px;"
id="asterix"></span>
<div id="result"></div>
I wonth to be able to uncheck radio button on second click with custom design radio buttons.
Here is HTML code:
<input type="radio" id="sortForm11" name="sortForm11" value="descPrice"/>
<label for="sortForm11">Text<span ></span></label>
Here is CSS code:
input[type="radio"] {
display:none;
}
input[type="radio"] + label span {
display:inline-block;
width: 20px;
height: 20px;
margin: 0 10px 0 0;
vertical-align:middle;
background:url(../images/checkbox.png) left top no-repeat;
background-size: 20px 20px;
cursor:pointer;
border-radius: 2px;
float:right;
}
input[type="radio"]:checked + label span {
background-color: #4bc2ff;
}
Here is js code:
$('input[name=sortForm11]').on('click',function () {
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
console.log('cao');
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name=sortForm11]').data('waschecked', false);
});
P.S. : If my input field is visible and if I test this it is working but if I tweak it for custom design it doesn't work.
You can use this example:
https://jsfiddle.net/k0sp350f/5/
$('input[name=sortForm11] + label span').on('click', function (e) {
var $radio = $(this).parent().prev();
// if this was previously checked
if ($radio.is(':checked')) {
$radio.removeAttr('checked');
} else {
$('input[name=' + $radio.attr('name') + ']').removeAttr('checked');
$radio.attr('checked', 'checked');
}
});
Unchecking it works too!
UPDATED: For multiple radio buttons with the same name
<input type="radio" id="sortForm11" name="sortForm11" value="descPrice"/>
<label for="sortForm11">Text<span ></span></label>
<br>
<input type="radio" id="sortForm11" name="sortForm12" value="descPrice"/>
<label for="sortForm12">Text2<span ></span></label>
var val = 0;
var val2 = 0;
$('input[name=sortForm11]').on("click", function(){
console.log(val);
if($(this).val()==val)
{$(this).prop('checked', false);
val = -1;
}
else val = $(this).val();
});
var val2 = 0;
$('input[name=sortForm12]').on("click", function(){
console.log(val2);
if($(this).val()==val2)
{$(this).prop('checked', false);
val2 = -1;
}
else val2 = $(this).val();
});
Use the following code.
var val = 0;
$('input[name=sortForm11]').on("click", function(){
console.log(val);
if($(this).val()==val)
{$(this).prop('checked', false);
val = -1;
}
else val = $(this).val();
});
Here is example : http://jsfiddle.net/wuAWn/534/
A little background of my problem:
I'm making a board-based game when the user is going to be able to make a path from a square to another one, the thing is that when a square is clicked it should stay highlighted no matter if pointer is over of it and then leaves it. It seems when the square is clicked and then the pointer leaves it the handlerIn of .hover() changes the state of the square's path-type attribute making possible to the square to be unhighlited when the pointer enter and leaves the square.
this is what I've got so far:
$(function() {
$('td.soccer-field').click(function(){
if ($('#dice1').text() != '' && $('#dice2').text() != '') {
if ($("[path-type='begin-path']").length == 0) {
$(this).attr('path-type','begin-path');
} else if ($("[path-type='begin-path']").length && $(this).attr('path-type') != 'end-path'){
$(this).attr('path-type','end-path');
$('[path-type="selecting-actual-path"]').attr('path-type','actual-path');
} else if ($(this).attr('path-type') == 'end-path'){
$(this).attr('path-type','');
};
}
});
$('td.soccer-field').hover(
function () {
if ($('#dice1').text() != '' && $('#dice2').text() != '') {
if ($("[path-type='begin-path']").length == 0) {
$(this).attr('path-type','select-begin-path');
} else if ($(this).attr('path-type') == ''){
var actualCell = $(this).attr('id') + $(this).parent().attr('id');
var cell, distance,dicesResult = parseInt($('#dice1').text())+ parseInt($('#dice2').text());
$("[path-type*='path']").each(function () {
cell = $(this).attr('id') + $(this).parent().attr('id');
distance = new Board().calculateDistanceSquares(actualCell,cell);
if (distance == 1 && $("[path-type='selecting-actual-path']").length < (dicesResult -2))
{
$(this).attr('path-type','selecting-actual-path');
return false;
}
});
}
};
},function () {
if ($(this).attr('path-type') == 'selecting-actual-path' || $(this).attr('path-type') == 'select-begin-path') {
$(this).attr('path-type','');
}
});
$('#diceRoller').click(function() {
$('#dice1').text(Math.floor(Math.random()*6)+1);
$('#dice2').text(Math.floor(Math.random()*6)+1);
$(this).attr('disabled',true);
});
});
//function Board(playerTurn, piecesPosition, gamePhase, gameBegginingType, container)
function Board(){
this.buildBoard = function (container) {
var board = $('<table></table>').attr('id','board');
var row, cell,containerHeight,containerWidth;
for (var i=0; i<10; i++){
row = $('<tr></tr>').attr('id',i+1);
for (var j=0; j<20; j++){
cell = $('<td></td>');
cell.attr('path-type','');
if ((j == 0 || j == 19) && (i >= 3) && (i <= 6)) {
cell.addClass('behind-goal');
}
else if ((j > 0) && (j < 19)){
cell.attr('id',String.fromCharCode(j+96));
cell.addClass("soccer-field");
};
row.append(cell);
}
board.append(row);
}
$('#'+container).append(board);
};
this.calculateHorizontalDistance = function (sq1,sq2) {
var column1 = sq1.substring(0,1).charCodeAt(0);
var column2 = sq2.substring(0,1).charCodeAt(0);
return ( Math.abs(column1-column2) );
};
this.calculateVerticalDistance = function (sq1, sq2) {
var row1 = parseInt(sq1.substring(1));
var row2 = parseInt(sq1.substring(1));
return ( Math.abs(row1-row2) );
};
this.calculateDistanceSquares = function(sq1, sq2){
return(this.calculateVerticalDistance(sq1,sq2)+this.calculateHorizontalDistance(sq1,sq2));
}
}
var board = new Board();
board.buildBoard('left');
#left table{
width: 60em;
height: 25em;
border:0.2em solid black;
border-collapse:collapse;
}
#left table tr{
height: 2.5em;
}
#left table tr td{
width: 3.33em;
}
td.soccer-field{
border: 0.1em solid black;
}
td.behind-goal{
background-color: #F8FAB4;
}
td[path-type*="path"]{
border: 0.15em solid #F8FAB4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boardContainer">
<div id="right">
<p id="dice1"></p><p id="dice2"></p>
<button id="diceRoller">Lanzar Dados</button>
</div>
<div id="left"></div>
</div>
A little help will be really appreciate
To prevent that you can add an attribute on the element whenever it is clicked and remove it later on second click. Now in the hover handler check for this attribute on the element, if it is present(or set) then don't do anything just return from the handler.
Something like this
$('td.soccer-field').click(function(){
$(this).data('clicked', !!$(this).data('clicked'));
...
...
});
$('td.soccer-field').hover(
function () {
if ($(this).data('clicked')) return;
...
...
},
function () {
if ($(this).data('clicked')) return;
...
...
});
For my website at work I am trying to get the webbrowser to scroll to the tope of the page when in a small screen mode. According to some answers it should already being doing this anyway. I have enclosed a copy of the website here:
http://www.synergy-clinics.com/
I believe the code to control navigation is here:
var $currentclass = 'currentpanel';
var $currentlinkclass = 'currentlink';
var $class = 'panel';
var $dotclass = '.panel';
//var $body = 'body';
var $body = '#content'
var $downkey = '38';
var $upkey = '40';
//$(function () {
// $($body).mousewheel(function (event, delta) {
// var $current = $('div.currentpanel');
// $next = (delta > 0)? $current.prev($dotclass) :$next = $current.next($dotclass);
// if ($next.length) { ChangeCSSClass($current, $next); }
// event.preventDefault();
// });
//});
$(function () {
$($body).keydown(function (event, delta) {
var $current = $('div.currentpanel');
if (event.keyCode == $downkey)
{
$next = $current.prev($dotclass);
if ($next.length) { ChangeCSSClass($current, $next); }
event.preventDefault();
}
else if (event.keyCode == $upkey)
{
$next = $current.next($dotclass);
if ($next.length) { ChangeCSSClass($current, $next); }
event.preventDefault();
}
});
});
function MenuItemClick(SectionName)
{
var $current = $('div.currentpanel');
var $next = $('#' + SectionName);
if ($next != null) { ChangeCSSClass($current, $next); }
//event.preventDefault();
}
function ChangeCSSClass(Current, New)
{
$($body).scrollTo(New, 100, { offset: -115 });
$('#' + Current[0].id + 'Link').removeClass($currentlinkclass);
$('#' + New[0].id + 'Link').addClass($currentlinkclass);
Current.removeClass($currentclass);
Current.addClass($class);
New.addClass($currentclass);
}
I have Identified the scrollto line so it must be around here somewhere, any help would be much appreciated.
I was looking for that a few hours , and finally i did.
can you try that :
http://jsfiddle.net/b4M66/
jQuery:
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
CSS:
#toTop { position: fixed; bottom: 50px; right: 30px; width: 84px; background-color: #CCC; cursor: pointer; display: none; }
HTML:
<div id="toTop">Back to Top</div>
The KeyCode functions arent supported on touch screen devices. You have your code based on that. Just try to move that to the touchstart or click function of an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Basic Drag and Drop</title>
<style>
#drop {
min-height: 200px;
width: 200px;
border: 3px dashed #ccc;
margin: 10px;
padding: 10px;
clear: left;
}
p {
margin: 10px 0;
}
#triangle {
background: url(images/triangle.jpg) no-repeat;
}
#square {
background: url(images/square.gif) no-repeat;
}
#circle {
background: url(images/circle.jpg) no-repeat;
}
#red {
background: url(images/red.jpg) no-repeat;
}
#yellow {
background: url(images/yellow.jpg) no-repeat;
}
#green {
background: url(images/green.jpg) no-repeat;
}
.drag {
height: 48px;
width: 48px;
float: left;
-khtml-user-drag: element;
margin: 10px;
}
</style>
<script>
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
(function () {
var pre = document.createElement('pre');
pre.id = "view-source"
// private scope to avoid conflicts with demos
addEvent(window, 'click', function (event) {
if (event.target.hash == '#view-source') {
// event.preventDefault();
if (!document.getElementById('view-source')) {
// pre.innerHTML = ('<!DOCTYPE html>\n<html>\n' + document.documentElement.innerHTML + '\n</html>').replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]});
var xhr = new XMLHttpRequest();
// original source - rather than rendered source
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
pre.innerHTML = this.responseText.replace(/[<>]/g, function (m) { return {'<':'<','>':'>'}[m]});
prettyPrint();
}
};
document.body.appendChild(pre);
// really need to be sync? - I like to think so
xhr.open("GET", window.location, true);
xhr.send();
}
document.body.className = 'view-source';
var sourceTimer = setInterval(function () {
if (window.location.hash != '#view-source') {
clearInterval(sourceTimer);
document.body.className = '';
}
}, 200);
}
});
})();
</script>
<style id="jsbin-css">
</style>
</head>
<body>
<div class="drag" id="triangle" draggable="true"></div>
<div class="drag" id="square" draggable="true"></div>
<div class="drag" id="circle" draggable="true"></div>
<div class="drag" id="red" draggable="true"></div>
<div class="drag" id="yellow" draggable="true"></div>
<div class="drag" id="green" draggable="true"></div>
<div id="drop"></div>
<script>
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
var dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
// store the ID of the element, and collect it on the drop later on
event.dataTransfer.setData('Text', this.id);
});
}
var drop = document.querySelector('#drop');
// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);
addEvent(drop, 'drop', function (e) {
if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
this.innerHTML += '<p>' + e.dataTransfer.getData('Text') + '</p>';
return false;
});
</script>
<script>
document.getElementById('drop').ondblclick = function(){
this.innerHTML="";//remove your text here
};
</script>
</body>
</html>
in the line of below is to removed the whole box called drop name. but i want to removed the selected text that i added inside only. others text, i still want it to remain stay inside the drop box.Is it need to be code one by one for the data drop inside or how is going to work on? Please help me... thanks so much.
document.getElementById('drop').ondblclick = function(){
this.innerHTML="";//remove your text here
};
If you are looking to remove / manipulate selected text, then look at the Selection and Range object API's MDN, but bear in mind these may still be non-standard API's
There is a jFiddle example here which will report the selected range and also remove the selected text:
document.getElementById("drop").ondblclick = function() {
var sel = window.getSelection(),
range = sel.getRangeAt(0),
text = this.innerHTML,
toRemove,
editedText;
//console.log("sel ", sel, " range ", range);
toRemove = text.substring(range.startOffset,range.endOffset);
editedText = text.slice(0, range.startOffset) + text.slice(range.endOffset);
console.log("toRemove ", toRemove);
console.log("editedText ", editedText);
}
Bear in mind that double-clicking on an area of text may vary in behaviour - if I double click text in Chrome, it only selects a single word.