How do get current field in a UIWebview - iphone

If I click a textbox for a webpage within a UIWebView is there a way to get the name of that textbox?
It seems like I should be able to use stringByEvaluatingJavaScriptFromString, but if I don't already know the name of the field or textbox, it won't be of much use will it?

I haven't tested it in the iOS webkit, but document.activeElement should give you the dom node of the currently focused element, if the user has selected an input field.
You can modify it's contents by setting the value attribute of the node.
If the user hasn't selected an input field, then the activeElement might be a DIV or BODY, or some such. You can check for this by examining the nodeName property of the node.
Depending on what kind of node it is, you may have to set the innerHtml attribute.

Related

Typo3, set title for Mask Elements

I have a typo3 server and using the mask extension. When an editor creates a new mask element, there isnt a title in the list view. Its always "no title":
I checked the database and found the titles in the db in the field: tt_content.header but no way to set them automatically oder manually by an editor. Anyone have an idea how the title can be set automatically? Oder manually by an editor?
ext:mask has the option to reuse existing fields of tt_content for new kinds of content elements (CEs). use it to get the bonus of better interoperability with TYPO3.
TYPO3 has a logic how to show records (content elements) in the backend. one of it is the usage of the fields header and description. if you reuse these fields your CEs will look like others automatically.
If you use other fields you need to declare your fields for usage AND in case you change the kind of a CE from your kind to e.g. TEXT with Media the header stays.
Especially header is handled in the layout/partial of FSC or CSC global for any kind of CE. if the handling/rendering is changed (e.g. special layout) in an installation your CEs need special effort if they have their own building of the header.
Try to use the same fields as existing CEs and your life can be easier.
I'm having the same issue, but I found a way around it for the meantime. I edit the mask element and chenge its type to something elseโ€”like Textโ€”where I can set the title. After typing the title I save it, then change back to mask element and save again. This works by me without losing the content of the mask element. This way I can see the title in typo3 backend when I view as list or page or add content from another page. As I said, it doesn't solve the problem, but can help until there is a proper solution.
EDIT
I've just found another solution. You can add the title field to en existing mask element. To do it, go to ADMIN TOOLS > Mask, click your mask element to edit it. Add a new item by dragging the ๐—ฆ๐˜๐—ฟ๐—ถ๐—ป๐—ด item (the one on top of the list of available items) to the right where your items are. Then in General under ๐—–๐—ต๐—ผ๐—ผ๐˜€๐—ฒ ๐—ณ๐—ถ๐—ฒ๐—น๐—ฑ dropdown choose an ๐—˜๐˜…๐—ถ๐˜€๐˜๐—ถ๐—ป๐—ด named:
๐—›๐—ฒ๐—ฎ๐—ฑ๐—ฒ๐—ฟ: (๐—ต๐—ฒ๐—ฎ๐—ฑ๐—ฒ๐—ฟ)
Save, close, go to your page to add your title. This still doesn't add the title field automatically to all mask elements, but it is a step forward.
If anywhere, you should be able to set a static title automatically in your page tsconfig. You could to something like
mod.wizards.newContentElement.wizardItems.mask.elements.[title of your mask element].tt_content_defValues {
header = My Awesome title
}
Personally, I usually give every mask element a header field and ask content editors to fill it in.
See also this discussion on Mask elements and backend titles.
Hope, this helps.

Angular Material Input move placeholder on top when controls state is disabled

For angular material placeholder becomes a label when we enter value in the input control.
I am using my form for both view and edit mode. When in view mode I just disable the form so user can't edit it (based upon the user role and API takes care of it too)
However it looks pretty odd looking at control with placeholder text on it. Is there any CSS trick so that I can make placeholder value to be a label of that control and have the input shown as blank field (so it looks like no value is available for this control and placeholder actually becomes a label on the top)
Please advise
OK, I seems like my questions was not clear enough.
I found the solution and was pretty easy.
I used "floatLabel" attribute of mat-form-field and made is dynamic with form's disabled property.
if the form is disabled placeholder will be become label even if the input has not value available.
<mat-form-field appearance="fill" floatLabel="never">
<mat-label>Input</mat-label>
<input matInput>
</mat-form-field>

Angular UI Bootstrap typeahead does not extend past parent div border like a normal select dropdown

I'm using the Angular UI Bootstrap typeahead to display a customized list of suggestions as the user types into a text input form control. This form control exists inside a div using jQuery slimScroll in order to maintain a constant div size despite the size of its contents fluctuating. I really hoped the typeahead would display over everything like a regular html select dropdown, but unfortunately it does not, as can be seen in this plunker. I've tried futzing around with the z-index and adjusting the position and display properties; all fruitless endeavors.
Does anybody know how to get the typeahead popup to display over its parent border? If not, is there a way I could coerce the select tag to display HTML content so I can include glyphicons, emphasized text, etc. in the list of suggestions?
The problem is with the slim scroll - you are inside a div with relative position and overflow hidden (think of it as an iFrame). There is a small workaround...
You could, essentially set the position of the generated UL (.dropdown-menu) to fixed, set a height for it, then set an overflow:scroll...
It would work in some scenarios where the input field has a fixed position... otherwise you'd need to control where the input is and adjust the position of the auto-complete to follow, and a whole other bunch of nasty scripts.
Without looking at your application, I cannot understand why your have this particular architecture, but I can say that there must be cleaner options for handling autocomplete outside of slimscroll.
I just set typeahead-append-to-body="true" on the typeahead control and it worked. Not sure exactly why, but it's certainly a simple solution.

showing hyperlink in iphone

I have a field in sqlite db which has multiple links inside it separted by comma. I displayed one link by placing it in a label and placing an invisible button over it and capturing the click of the button.Is there any other way to show these hyper links as the number of links in the field may change.
Use UITextView which automatically detects phone numbers, http links, and so on, if its dataDetectorTypes property is set properly to a required UIDataDetectorTypes value.

How to force a node inside tiny mce?

I'm using tiny mce for my project and want to validate the node inside the tiny mce. On click of a text element, let's say a paragraph with some id, I load editor for the element. But, sometimes if user replaces the whole content, the node and its HTML is lost. I want to retain this node and only the content is removed. The node can be a paragraph or heading or ul or ol.
EDIT :
I'm providing dummy text such as "Lorem epsum .....". User will be removing this dummy text and add his content.
EDIT2
I want to allow the user to change the content only and the surrounding HTML and styles should remain intact.
How can I accomplish this ?
This would check if node content is in editor, and if not will add it at the bottom.
var nodecontent;
if (!tinyMCE.activeEditor.getContent().match(/nodecontent/) {
tinyMCE.activeEditor.setContent(tinyMCE.activeEditor.getContent()+nodecontent);
}
You could make a new button in tinymce which gives you a pop-up asking for the ID or the title of a node. This button then puts a small piece of "code" in the tinymce textfield.
for example: ((id:10))
When loading a node, you can search if the current node has that "code" in it by a regular expression. If it has, load the content from the node with that ID from the database.
Hmmm, it will be very tricky to keep the surrounding html while the user is able to delete html elements in the editor. You would need to intercept each attempt where a user could delete your surrounding html (Copy/paste, delete, backspace, usage of the code-plugin, and so on...) and then handle it case for case.
Suggestion:
In case the surrounding html will never change you could give the user total control over the editor content through adding the surrounding html after the user submits/saves the editor content. To keep the style even without the surrounding html it might be sufficient to create a css class and apply it to the body element of the editors iframe. The body element is not deletable. I do not know if this is acceptable in your use-case (let us know).