We Keep Coding

Cursor missing after typeheadOnSelect

I have a text box with [typehead] attribute, on the event (typeheadonSelect), once the value is selected from the drop-down list.
The issue is cursor disappears once the user selects an item from the list, the item displays on the textbox but the cursor disappears.
I want the cursor to appear back on the text box. Any idea why this would be?

You can add following style within your tag to generate cursor back.
style="cursor: pointer"
eg:
<input type="text" style="cursor: pointer"/>

JavaScript text changing functionality in Html tables

we have an issue with using javaScript over 2 HTML pages.
We want to change text in a table. There is a button you can press which opens a popup.
Here an example.
If you press the "Eintragen" button it opens a popup.
In the popup there should be a button which changes the innerHTML where the "Eintragen" button is.
So basically pressing the button in the popup should cause the "Eintragen" button to disappear and should show text instead.
Changing the text in one HTML page caused no problem. We can cause the button to disappear and showing text by pressing it. Our problem is by doing it with an extra popup where we press a button.
Here is our table and popup:
(We want to replace "Hallo" and the "Eintragen" Button through a different text with no button)
https://i.stack.imgur.com/xVAK8.png
And here is our code:
First one is the button which opens a popup (is already working)
Second one is the button in the popup which should trigger the JavaScript function.
Third one is the JavaScript code which should change the text
<td><input id="vname" name="vname"></td>
<td>Cell</td>
<td id="drei">Hallo<button class="button button-block"/onclick="popup(this.form)">Eintragen</button></td>
<button type="button" onclick="meineFunktion()">Eintragen</button>
function meineFunktion() {
window.close('schadensausmass.html');
document.getElementById("drei").innerHTML="test"
}
Do you have any tips and solutions how to make this work. We are JavaScript beginners and need some help with this.
Thanks in advance.

How do I get button to fire click, if first hidden by blur

Hi I have an editable area (textinput or contenteditable) and a button.
I would like the button to hide when the area looses focus -
but clicking on the button will loose focus, hide the button,
BUT THE BUTTON DOES NOT GET ANY CLICK EVENT ANYMORE.... ;-(
first click in the blue text area,
then click the button
the button should fire click and alert - but it doesn't !!
http://jsfiddle.net/3295f/
<div contenteditable="true"
style="width:300px;height:300px;border:3px solid blue;z-index:100;position:relative;"
onblur="$('button').hide()" >
</div>
<button onclick="alert(1)">pushme</button>
Any idea how to fix this ?
I was never expecting this to be a problem in the first place...
Thanks,
Sebastian

You could use this workaround instead:
<button onmousedown="alert(1)">pushme</button>
http://jsfiddle.net/3295f/2/

Keep selection made on editable DIV when focus is on other element

I have had this problem for a long time and I just can't figure out how to fix it. I want to create a simple WYSYWYG editor and I have some problems.
Currently I have this:
<div id="editor" contenteditable="true"></div>
<input type="button" value="B"
onmousedown="document.execCommand('bold',false,null); return false;"/>
So, if I have some text inside my DIV, select it and click on "B" it is converted to BOLD, and remains selected, but this doesn't work on Opera and IE.
I just don't know how to make the editable DIV not only keep the focus but also the text selection.
Any idea?

Two possible options are:
Use mousedown instead of click and prevent the default browser action: http://jsfiddle.net/dA9NK/
Make the button unselectable: http://jsfiddle.net/8hpvv/

knockoutjs checkbox and click on parent td

I have a table with a row. The row has a TD(with a checkbox in it) and on the TD I have a click function. So that when the TD is clicked the checkbox will get checked/unchecked.
It works fine when I click on the TD , but when clicking on the checkbox the (visual) value of the checkbox does not change( It does not get checked/unchecked )
The wanted situation is:
When I click the checkbox, the (visual) value of the checkbox changes and I can call a function.( for example to make an AJAX call )
When I click on the TD, the (visual) value of the checkbox changes and I can call a function. ( for example to make an AJAX call )
How can we achieve this?
Sample Code

The problem is that the click handler for the TD fires also when you click the checkbox, which means the checkbox gets changed by both the default click handler for the checkbox and your custom click handler for the TD (they counteract each other). The solution is to prevent clicks on the checkbox from bubbling to the TD. You can do this in Knockout with this binding: click:function(){return true}, clickBubble:false.
Here it is in action: http://jsfiddle.net/mbest/Eatdh/12/
I do think, however, that using a label is a better approach (see my other answer).

To avoid the click event issues, use the label element to make a larger area clickable. Here I've made the label a block element so it takes up the whole td:
<td>
<label style="display: block">
<input type="checkbox" data-bind="checked: checkBox" />
</label>
</td>
See http://jsfiddle.net/mbest/LsxSh/

Td Event seems to be overriding the the input's check click event

clicking the check box invokes the click hander code for the td:
self.checkBox(!self.checkBox());
this removes the check.

This isn't quite DRY, but its quick and functional: fiddle
<td data-bind="click:tdClick">
<input type="checkbox" data-bind="checked: checkBox, click:tdClick" />
</td>