I am loading UIWebView with html file. the html file contains some text in Div tags. I need to set cursor position in a div tag. the html file contains different div tags.based on some condition i need to locate cursor position.
This is helpful for setting the caret position.
Suppose my html is like this:
<div id="editable" contenteditable="true">
text text text<br>text text text<br>text text text<br>
</div>
<button id="button" onclick="setCaret()">focus</button>
and my javascript method is:
function setCaret() {
var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[2], 5);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
Related
I need tooltips in Foundation to accept html. The html in the title tag is not being read as html. Here is a simple example: https://sc.imaginalmarketing.net/test/
Here's the code:
<h3 data-tooltip data-allow-html="true" class="has-tip" title="<p>This is the description</p>">This is a tooltip</h3>
I'm not sure how to do it directly, but you can use javascript to adjust it. I did this in the console in Google's inspector (with code cobbled together from other places):
Select the tooltip by role (assuming you only have one tooltip on the page):
tooltip = document.querySelectorAll('[role="tooltip"]')[0]
Create the html element you want to append:
var a = document.createElement('a');
var linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.href = "http://example.com";
document.body.appendChild(a);
Append the html element to the tooltip:
tooltip.appendChild(a)
Hope that helps!
I have the following .html markup
.html
<paper-button
raised
active
toggles
on-tap = "toggler"
class = "bold">Patient *
<iron-icon
icon = ""
id = "fe-icon"></iron-icon>
</paper-button>
</div>
How can I make the * in Patient * red without the entire label being red, and also make the asterisk larger?
Just wrap it with a <span> like >Patient <span class="asterisk">*</span></iron-icon> then you can style it individually.
How to get the text or the inner html of the current selection by using dart:html? I use on-mouseup event of the div as the start point to do it:
<div on-mouseup="{{on_mouseup}}">
void on_mouseup(MouseEvent e, var detail, DivElement src) {
final selection = window.getSelection();
// do somthing
// ..
// final selectedText = ..;
window.alert("Selected text is $selectedText!");
}
Example:
The value of the variable selectedText should be 'window.getSel'
src.innerHtml` or `src.text
print(window.getSelection().getRangeAt(0).cloneContents().innerHtml);
print(window.getSelection().getRangeAt(0).cloneContents().text);
There is also a shadowRoot.getSelection() in PolymerElement.
print(shadowRoot.getSelection().getRangeAt(0).cloneContents().innerHtml);
print(shadowRoot.getSelection().getRangeAt(0).cloneContents().text);
I tried it with content outside the custom element, in the shadow DOM of the element and as child of the custom Element.
There are some issues what can be selected when the selection crosses the shadow boundary (immediately selects the entire content of the shadow DOM. Beside from that document.getSelection() and shadowRoot.getSelection() always return the same result.
It seems getSelection doesn't work when the end (mouse-up) is within the shadow DOM. When the selection starts in the shadow DOM and ends in the (child) content it works but not the other way around.
I think this is a bug.
I have the following markup:
<paper-input id="alias-input" floatingLabel label="Person Alias (eg: King, Eldest Son, Mooch, etc.)"></paper-input>
<paper-input id="birth-year-input" floatingLabel label="Birth Year (eg: 1969)" validate="^[12][0-9][0-9][0-9]$"></paper-input>
<div center horizontal layout>
<paper-button id="add-button" on-click="{{addPerson}}" class="add" label="Add Person"></paper-button>
</div>
To go along with this markup I have an addButton method which does:
addPerson(_) {
// Add the person
// ...
// Clear the inputs
($['alias-input'] as PaperInput)..inputValue = ''..commit()..blur();
($['birth-year-input'] as PaperInput)..inputValue = ''..commit()..blur();
}
This correctly clears the contents of the inputs, which I want. But I also want the PaperInput help label to drop down onto the line as it is when the control is first loaded. My hope was that the call to blur() would do that. Is there some other call to achieve this?
It seems you need to call blur on the actual <input id='input'> element inside <paper-input> not the <paper-input> itself.
I got it working with
import 'dart:js' as js;
var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
new js.JsObject.fromBrowserObject(inp).callMethod('inputBlurAction', []);
alternatively you can do it like
var inp = $['alias-input'] as PaperInput;
inp.inputValue = '';
inp.querySelector('* /deep/ #input') // not yet supported with polyfills
..focus() // blur doesn't work when the field doesn't have the focus
..blur();
I'm developing an extension for FireFox. I use a XUL deck element that contains a XUL browser element. Unfortunately, whenever the page displayed in the browser has an HTML title attribute, the value of this title attribute will not show up as a tooltip.
How can I get tooltips to display correctly?
There is no mechanism to automatically display title attributes in tooltips - the browser window has special code for that and you need to replicate this code in your extension. This means that you need to define a <tooltip> element, e.g.:
<popupset>
<tooltip id="browserTooltip" onpopupshowing="return fillTooltip(this);"/>
</popupset>
You should use this tooltip in your <browser> element, like this:
<browser tooltip="browserTooltip"/>
And you should create a fillTooltip() function that will be called whenever your tooltip shows up. It will need to look at the HTML element that the mouse pointer hovers over, check its title attribute and put the value of the attribute into the tooltip. The function performing this job in Firefox is FillInHTMLTooltip() though you might want to go with a simpler variant like this (untested code):
function fillTooltip(tooltip)
{
// Walk up the DOM hierarchy until we find something with a title attribute
var node = document.tooltipNode;
while (node && !node.hasAttribute("title"))
node = node.parentNode;
// Don't show tooltip if we didn't find anything
if (!node)
return false;
// Fill in tooltip text and show it
tooltip.setAttribute("label", node.getAttribute("title"));
return true;
}
I found the solution for those who are interested, it's by adding a tooltip property to the XUL browser element with the following value:
tooltip="aHTMLTooltip"
Or adding it programmatically using javascript like this:
browser.setAttribute('tooltip','aHTMLTooltip');
for more details check: https://bugzilla.mozilla.org/show_bug.cgi?id=451792#c1
Working example:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window id="mainWindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="NanoFL" width="800" height="600" persist="screenX screenY width height sizemode">
<script>
<![CDATA[
function fillTooltip(tooltip)
{
var nodes = document.getElementById("browser").contentWindow.document.querySelectorAll(":hover");
for (var i=nodes.length-1; i>=0; i--)
{
if (nodes[i].hasAttribute("title"))
{
tooltip.setAttribute("label", nodes[i].getAttribute("title"));
return true;
}
}
return false;
}
]]>
</script>
<browser id="browser" src="chrome://nanofl/content/index.html" flex="1" disablehistory="true" tooltip="browserTooltip" />
<tooltip id="browserTooltip" onpopupshowing="return fillTooltip(this)"/>
</window>