When a user types in some value in a text box it should be displayed in a td as it is.
This is the code I've tried with a div,
<input type="text" name="userStr" id="userStr" onKeyUp="processValue()"/>
<div id="disp">
</div>
<script type="text/javascript" >
function processValue() {
var userval = document.getElementById("userStr").value;
//alert('userval'+userval);
document.getElementById("disp").innerHTML = userval;
}
I enter the value, <> ( ) # & , but it is showing as <> ( ) # &
instead of the original string (<> ( ) # & )
What is the standard way to do this.
While I typed stackoverflow showed exactly the same, I'll now view the source, but looking for insights from you.
Thanks.
Try:
document.getElementById("disp").innerHTML = userval.replace(/&/g, '&').replace(/</g, '<');
Alternatively, you could set the element text, but you'd have to deal with browser variation.
Related
I have a function that I use to search content in my web using one text box <input class="form-control" id="search" type="text" placeholder="Search" /> the showing content are in different panels, so this is my script.
$('#search').keyup(function () {
var term = $(this).val();
if (term != '') {
$('.panel').hide();
$('.panel').filter(function () {
return $(this).text().indexOf(term) > -1
}).show();
} else {
$('.panel').show();
}
});
That works fine but only with the exactly match, if I write in the text box Hello shows me only the Hello words but I need that shows me to hello, hEllO or HELLO, all the string no matter the lower or upper case.
Any help is really appreciated, sorry for my bad grammar.
Convert both the search string and the text you are searching in to lower case:
return $(this).text().toLowerCase().indexOf(term.toLowerCase()) > -1
More info on MDN
Try to use toLowerCase() function to by pass case-sensitive matching, like:
$(this).text().toLowerCase().indexOf(term.toLowerCase()) > -1
use .toUpperCase() both your input val and filter val
I'm having a simple commenting system, where i want the user should not type any html special chars, if they done like that they should give an alert of "html tags not allowed". How to do it?
while submitting, a ajax call is passed to another page to store it in db.
So in the javascript itself(before ajax call), how to find is there any html tags in the entered comment.
Any suggestion.
To check you can create an element in the DOM, inject the comment into it and use [element].getElementsByTagName('*') to check for any html element. If its length is not 0, there are html elements in the comment. Something like:
document.querySelector('#check').addEventListener('click', doCheck);
function doCheck(e) {
var chkEl = document.createElement('div'),
isok,
report,
value = document.querySelector('#testing').value;
if (!value.length) {return true;}
chkEl.innerHTML = value;
report = document.querySelector('[data-report]');
isok = !chkEl.getElementsByTagName('*').length;
report.setAttribute( 'data-report',
!isok
? 'you can\'t enter html here!'
: 'text looks ok' );
report.style.color = isok ? 'green' : 'red';
}
[data-report]:before {
content: attr(data-report);
}
<textarea id="testing" placeholder="type some stuff"></textarea>
<span data-report=""></span>
<br>
<button id="check">check for html</button>
Disclaimer: you should always check server side too.
You can use the following statement with regex:
if (/<[a-z][\s\S]*>/i.test(textareaContent)) {
alert("html tags not allowed");
}
Kooilnc is right. You should always check user input on server side as well.
Please see this question Check if a string is html or not
removing html tags in comment
function sanitizeString(str) {
str = str.replace(/[^a-z0-9áéíóúñü \.,_-]/gim, " ");
return str.trim();
}
Ok so I've got a text input box which is for people to link there Tripadvisor page to a profile. I want it so when they paste the URL in it gets checked for the correct URL, so if: http://www.tipadvisor.com/ or if http://tripadvisor.com/ then allow link but if something like: http://www.differentdomain.com is inputed it will reject it.
Is there anything in JavaScript or jQuery that could do this?
All advice greatly appreciated.
/* author Vicky Gonsalves*/
function tValid(url) {
var p = /^(?:http?:\/\/)?(?:www\.)? (?:tripadvisor.com\/)?$/;
return (url.match(p)) ? RegExp.$1 : false;
}
this function will match if the provided string is a valid tripadvisor.com or not and will return true or false accordingly
example usage:
<input type='text' id='tripurl' />
<button type='button' onclick='validateUrl()'>validate</button>
<script>
var url=document.getElementById('tripurl').value;
if(tValid){
// url is valid
}else{
//url is invalid
}
</script>
i've got the following request:
create a plain text field that transforms into an text input element when clicking on an edit trigger. When leaving the input element the text will be stored in the database and the field is transformed back into a plain text field with the new content. When ESC is pressed in the input the recent value is restored. To do this i use the following code:
<div id="value"><span id="text">some text</span></div>
<div id="trigger">[EDIT]</div>
<div style="display: none;" id="storage">
<input type="text" id="input" value="some text"/>
</div>
<script type="text/javascript">
$('#trigger').click(function() {
var t = $('#text').detach();
var e = $('#input').detach();
$('#storage').append(t);
$('#value').append(e);
e.focus();
});
$('#input').blur(function() {
var t = $('#text').detach();
var e = $('#input').detach();
if (t.text() != e.val()) {
$.getJSON(...);
}
$('#storage').append(e);
$('#value').append(t);
});
$('#input').keyup(function(event) {
if (event.which == 27) {
$('#input').val($('#text').text());
$('#input')[0].blur();
}
});
</script>
Thanks to #nnnnnn this now works. But is there maybe a simpler way to implement this using some preexisting API functions?
thanks very much.
use jquery editable here is a link
for demo:
http://www.appelsiini.net/projects/jeditable/default.html
for plugin home page
http://www.appelsiini.net/projects/jeditable
I developed a plugin that do what you need:
$.convertTo
I hope it will be helpful, regards.
I have the following Javascript:
function PageOnLoadHandler() {
outputFieldElement = document.getElementById("ConsultantCode"); //
var position = window.location.href.search("\\?");
if (position != -1) {
var querystring = window.location.href.substring(position);
outputFieldElement.value = querystring;
}
outputFieldElement.focus();
}
For the following html (cut down):
<body onload="PageOnLoadHandler();">
<br/>Enter Consultant Name:
<input name="ConsultantCode" type="text" id="ConsultantCode" size="30" />
<br/><center id="ErrorMessage"></center>
</body>
It gets the current url string, and attempts to put the querystring section of it into a textbox. My problem is that this only works if I comment out the outputFieldElement.focus() line. If this line is present- either before or after setting the value (or both), I can't see the value inside the textbox until I type- then the value appears! Any ideas?
I would like to both have the value, and set the focus to the textbox.
A complication- this isn't on a PC, its on a Mitel IP telephone. So I haven't been able to find out what browser it is using.
try using
window.onload = PageOnLoadHandler;
instead of using <body onload="....