avoid ie contentEditable element to create paragraphs on Enter key - html

On InternetExplorer, a contentEditable DIV creates a new paragraph (<p></p>) each time you press Enter whereas Firefox creates a <br/> tag.
Is it possible to force IE to insert a <br/> instead of a new paragraph ?

Here's a solution (uses jQuery). After you click on the 'Change to BR' button, the <br> tag will be inserted instead of the <p></p> tag.
Html:
<div id='editable' contentEditable="true">
This is a division that is content editable. You can position the cursor
within the text, move the cursor with the arrow keys, and use the keyboard
to enter or delete text at the cursor position.
</div>
<button type="button" onclick='InsertBR()'>Change to BR</button>
<button type="button" onclick='ViewSource()'>View Div source</button>
Javascript:
function InsertBR()
{
$("#editable").keypress(function(e) {
if (e.which == 13)
{
e.preventDefault();
document.selection.createRange().pasteHTML("<br/>")
}
});
}
function ViewSource()
{
var div = document.getElementById('editable');
alert('div.innerHTML = ' + div.innerHTML);
}
These links helped.
Working example here.

Yes it is possible to avoid the insertion of paragraphs by stopping the keydown event first (window.event.stopPropagation();) and then inserting the string by using insert HTML command.
However, IE depends on this divs for setting styles etc. and you will get into trouble using <br>s.
I suggest you using a project like TinyMCE or other editors and search for an editor which behaves the way you would like, since they have all kinds of workarounds for different browser issues. Perhaps you can find an editor which uses <br>s...

You can always learn to use SHIFT + ENTER for single line returns and ENTER for paragraph returns. IE behaves like MS Word in this respect.

Changing the line-height of the <p> inside the editable <div> works:
#editable_div p
{
line-height: 0px;
}

If you can use it, FCKEditor has a setting for this

Related

V-onclick evt.target gets the button inside the span; what should I do?

I have a button with a span inside it that is set to run a function v-on:click. I try to pick up the value1 value attached to the button (naming convention aside) by catching it as an evt.
The problem I'm getting is if I click the side of the button it runs as expected. But if I click the span inside it, I can't pick up the value1 because the evt.target is the span.
I'm converting an existing project to Vue, and this isn't the behavior I expected. What is the best way to deal with this?
Thanks!
<button id="touch-button" class="button float-center" value1="19" v-on:click="emit_values">
<span>19</span>
</button>
emit_values(evt){
$(evt.target).attr("value1")
}
Apparently this is a generic html/javascript issue.
Solution is here: Missing click event for <span> inside <button> element on firefox
I've changed it to target evt.currentTarger, then used css to add the pointer-events: none; styling to all children of those buttons.

IE input cross sign

I create a text input in bootstrap modal and I would like to do the input validation for the input text(the text inside cannot be empty. If so, submit button is disabled). For input validation, it works well in Chrome and Firefox, but has some problem in IE.
The problem is the input box in IE has a little cross sign at the top right corner as shown in the below picture(but chrome and firefox does not have) and when the user input something, the cross sign shows. If deleting the text one by one until empty, validation works and the button is disabled. If deleting the text using the cross sign at the first time, validation works. However, for second time and afterwards, the validation does not work and submission is allowed. The submitted content will be the text before deleting using cross sign. It seems to me that IE cache the text. I would like to know how to solve this problem?
Update:
I found the answer to solve this problem for IE10&11(Remove IE10's "clear field" X button on certain inputs? ), but what is the solution for earlier version of IE?
<input type="text" name="name" ng-model="newName" required/>
<button type="button" class="btn btn-primary" ng-click="submit()" ng-disabled="form.name.$invalid" data-dismiss="modal">Submit</button>
Hide works fine but alternatively without hiding it, you can handle it using jquery (or jqlite via angular.element ). You can check the mouse event on text input field and if the element is not pristine & if the newvalue is null then trigger angular change event on that input field using triggerHandler method.
$('#textFieldId').bind("mouseup", function() {
var $input = $(this);
var oldValue = $input.val();
if (oldValue == "") {
return;
}
setTimeout(function() {
var newValue = $input.val();
if (newValue == "") {
$input.triggerHandler('change');
}
});
});
http://plnkr.co/edit/GgU3XbaRaVUNW4NBrzKm?p=preview
And similarly with some minor changes you can create E/A type directive & write same code inside link function & use it on input fields.
use this css:
input[type=text]::-ms-clear{
display: none;
}

HTML.ActionLink Button Issue

I currently have a button that is functioning a little strange. Whenever you click right in the middle of the button, it works and carries on the requested action. However, if you click anywhere near the outside border of the button, then the action doesn't get carried out.
Here is the current code:
#if(mode == "Edit"){
<div class="Delete"><button class="btn btn-danger">
#Html.ActionLink("Delete Profile", "Delete", "GPS", new { Id = Model.provider.Company.Id.Value, oem = Model.provider.Id},
new { onclick = "return confirm('Are you sure you want to delete this provider?
All GPS Devices attributed to this provider will be removed as well.')" })</button></div>
}
If you check the resulting HTML of your code you will see the following structure:
<div>
<button>
<a></a>
</button>
</div>
Your event onclick is only attached to the <a> tag, so if you click in any place inside the <button> but outside the <a>, the action won't be fired.
By default <a> tags are inline, it means (among other things) its size is defined by its content so it won't fullfill the <button>, you can see this visually using the inspect tools from any brosers (like Chrome Developer Tools).
You can fix this using CSS to change the dimensions of your <a> tag. Try with display:block, width and height.
The final answer will depend on your other style rules.

HTML: How to make a readonly textarea copyable in iOS-devices

How do I make a textarea and input type="text" highlightable and copyable on iOS-devices?
This does not work:
<textarea readonly="readonly">Totally readonly, cannot be copied</textarea>
Neither does:
<textarea disabled="disabled">Totally readonly, cannot be copied</textarea>
EDIT: The text-area is constantly being updated, so a one-off transformation of it won't work.
The content of the textarea can also be HTML.
I have a JSFiddle that I tested this on: http://jsfiddle.net/sebnilsson/jfvWZ/
One solution could be to find all the readonly textareas on the page and render a div with the contents in place of the read only field. I have written some very simple JS to demonstrate this.
Something along the lines of
$('textarea[readonly]').removeAttr('readonly').each(function () {
var $this = $(this);
$this.hide().after('<div data-textarea="' + $this.attr('id')
+ '" class="textarea">' + $this.val() + '</div>');
}).on('textareachange', function () {
var $this = $(this);
$('[data-textarea="' + $this.attr('id') + '"]').html($this.val());
});
You will also need to trigger the event when you update the textarea value.
For example
$('textarea').val('test').trigger('textareachange');
There's a more extensive example here with examples on the styling etc.
http://jsfiddle.net/ssfUx/3/
I've successfull select some text on my iPhone, but needs many try.
<textarea readonly onfocus="this.blur();">Totally readonly, CAN BE copied</textarea>
and the last : http://jsfiddle.net/jfvWZ/6/
<div>
<label>Plain div</label><br />
<div id="plain-div" onFocus="this.blur();">
Plain div
</div>
</div>
Easy to select the text on iPhone
Likewise ran into this issue.
Not sure if the following is a decent, correct or semantic alternative, but it worked for me.
I simply changed the textarea to a div readonly, same styles applied.
The one drawback is that in JavaScript I couldn't target the div with this['myForm']. It doesn't appear to be a child of the form element in DOM.
Instead I had to get the element by id and set it's innerHTML, rather than set the value as with textarea.
It worked on Ipad 1 IOS5 and Iphone 4s IOS7 I am now able to select and copy text to clipboard.

Turn off enclosing <p> tags in CKEditor 3.0

Is there a possibility to turn off the automatic enclosing of all written content within <p></p> in CKEditor 3.x?
I tried
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
but this just changes the inline linebreaks to <br /> while leaving the enclosing paragraph.
Currently writing "Test" produces this output
<p>
Test</p>
but I want it to be simply
Test
Is there a configuration property for this or would another inline editor to be better suited for this?
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; - this works perfectly for me.
Have you tried clearing your browser cache - this is an issue sometimes.
You can also check it out with the jQuery adapter:
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#your_textarea').ckeditor({
toolbar: 'Full',
enterMode : CKEDITOR.ENTER_BR,
shiftEnterMode: CKEDITOR.ENTER_P
});
});
</script>
UPDATE according to #Tomkay's comment:
Since version 3.6 of CKEditor you can configure if you want inline content to be automatically wrapped with tags like <p></p>. This is the correct setting:
CKEDITOR.config.autoParagraph = false;
Source:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph
Across the internet, people have noticed that setting config.enterMode to CKEDITOR.ENTER_BR removes the wrapping paragraph tags from CKEditor. It's worth noting that the setting changes the behavior of the enter key to insert line breaks rather than paragraphs, which is not desirable.
See: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode "It is recommended to use the CKEDITOR.ENTER_P setting because of its semantic value and correctness."
However, the setting that is designed to remove that initial paragraph, config.autoParagraph, isn't advisable either, as it introduces "unpredictable usability issues" because the editor really wants a top-level block element.
See: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph
The magic happens on wysiwygarea/plugin.js, line 410, where the editor selects the default block element based on config.enterMode. A config option to change the default block element would allow us to start with a div, but we'd continue getting more divs with every enter press, unless we changed the paragraph format via the menu.
See: http://docs.cksource.com/ckeditor_api/symbols/src/plugins_wysiwygarea_plugin.js.html
It would be possible to remove the wrapping paragraph tag with post-processing (either on the server or in CKEditor's getData event), but that leads us into the same problem as disabling autoParagraph: there's no top-level block.
I would rather say that there's not a good solution, but rather a handful of half-solutions, than to accept changing config.enterMode as the canonical solution.
Try this in config.js
CKEDITOR.editorConfig = function( config )
{
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
};
Found it!
ckeditor.js line #91 ... search for
B.config.enterMode==3?'div':'p'
change to
B.config.enterMode==3?'div':'' (NO P!)
Dump your cache and BAM!
MAKE THIS YOUR config.js file code
CKEDITOR.editorConfig = function( config ) {
// config.enterMode = 2; //disabled <p> completely
config.enterMode = CKEDITOR.ENTER_BR; // pressing the ENTER KEY input <br/>
config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER KEYS input <p>
config.autoParagraph = false; // stops automatic insertion of <p> on focus
};
I'm doing something I'm not proud of as workaround. In my Python servlet that actually saves to the database, I do:
if description.startswith('<p>') and description.endswith('</p>'):
description = description[3:-4]
Edit the source (or turn off rich text) and replace the p tag with a div. Then style the div any which way you want.
ckEditor won't add any wrapper element on the next submit as you've got the div in there.
(This solved my issue, I'm using Drupal and need small snippets of html which the editor always added the extra, but the rest of the time I want the wrapping p tag).
if (substr_count($this->content,'<p>') == 1)
{
$this->content = preg_replace('/<\/?p>/i', '', $this->content);
}
MAKE THIS YOUR config.js file code
CKEDITOR.editorConfig = function( config ) {
// config.enterMode = 2; //disabled <p> completely
config.enterMode = CKEDITOR.ENTER_BR // pressing the ENTER KEY input <br/>
config.shiftEnterMode = CKEDITOR.ENTER_P; //pressing the SHIFT + ENTER KEYS input <p>
config.autoParagraph = false; // stops automatic insertion of <p> on focus
};
Set such config:
CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR
CKEDITOR.config.forcePasteAsPlainText = true
Well, with me in laravel, with using ckeditor, it work using simple strip_tags($var) function for output like below:
Sending value to like this to the other page: {!! strip_tags($six_answer) !!}
And/Or when outputting use the same code: {!! strip_tags($six_answer) !!}.
the result is below without any <p> tags.
In VS2015, this worked to turn the Enter key into <br>
myCKEControl.EnterMode = CKEditor.NET.EnterMode.BR
Personally, I don't care if my resulting text only has <br> and not <p>. It renders perfectly fine and it looks the way I want it to. In the end, it works.