I have a pre element that has a bunch of read-only text in it and I now have spell-checking working on the pre. However, if I right-click on the text that has the spelling error, I am able to change the value in the pre element. Is there any way to prevent the auto-suggestion from populating for this element?
Edit: I want to keep the spell-checking. I don't want the user to be able to right-click to auto-correct the mis-spelled word. I do want them to be able to add the mis-spelled word to their dictionary though.
You can use spellcheck=false with textarea and input.
Here is a fiddle with and without spellcheck property it: https://stackblitz.com/edit/react-kmyptb
EDIT:
More info at : https://www.tutorialrepublic.com/faq/how-to-disable-spell-checking-in-html-forms.php
Related
Is there a way using angular or just javascript to get the user input text not using HTML input boxes? For example when a user clicks on a paragraph he will be able to change its text without a text area popping so he could input. I tried focusing on angular ngHide element( a input HTML) but with no success. It only focused on the element when its showing.
Try contenteditable introduced in HTML 5.
Try Fiddle.
<p contenteditable="true" onfocus="alert(this.textContent)" onblur="alert(this.textContent)">
Enter Name
</p>
But there is. contenteditable is an HTML attribute that makes divs and cells editable. you can make a directive in angularjs to use that, but beware of the caveats that it introduces.
Take a look at x-editable. It will suit your needs, i think.
I am working on nightwatch.js, i want to update existing data so i need to remove old date and need to set new data, i tried two way to get my result.
1) set empty text using following nightwatch function.
browser.setValue('.MyClass', 'text',' ');
2) here i tried to use backspace but unfortunately nightwatch.js api documentation is not so good, so i tried following with the help of this link but not worked.
client.keys([client.Keys.COMMAND, "Backspace", client.Keys.NULL]);
above code not pressed mouse backspace but append 'Backspace'.
If you have any best idea, please let me know.
You can use .clearValue('selector') now :
http://nightwatchjs.org/api/clearValue.html
Check the nightwatch api for setValue
http://nightwatchjs.org/api#setValue
browser.setValue('input[type=text]', 'nightwatch');
Check the class you are entering, i guess somehow nightwatch is not able to find your element.
What follows is not optimal, I am sure. Either of the following lines of code will work for removing the last character of the string currently in the input field. It's just setting a backspace; sometimes that's what's works.
.useXpath().setValue(selector, "\u0008")
.useCss().setValue(selector, "\u0008")
If you get the string in the input field, then get the length of the string you can sent this command that many times to remove the text in the input field. I'm not including it here as a suggestion, more as a workaround.
I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');
I have a textarea #myarea into which I'm typing text. I've typed this text.
This is a sentence and only this word
will end up being bolded
Now I have a button on the side, like a bold button. I want to select the letters I want bolded, click the button, and see those letters turn bold inside the textarea. It's similar to the standard functionality found in many editors, but I'm looking for something much simpler as I described here.
So is there a way to do this with jquery? I'm guessing it's a 2-part problem. I need to find the letters selected, then apply bold to them so it shows bold inside the textarea.
If you don't mind using a div that has its ContentEditable property set to true then you can easily do this using:
document.execCommand('bold',null,false);
You can easily style this div to look and feel like a textarea.
See jsFiddle here: http://jsfiddle.net/hqvDT/1/
I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.
I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.
Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.
document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.
The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.