search page function for internet explorer - javascript

I need to put a search page function in the site that I'm working on. I found one online and it works great in Firefox and Chrome but not at all in IE. I think the fact that I didn't write this code is making it particularly hard to debug. Any help or guidance is appreciated!
HTML
<form id="f1" name="f1" action="javascript:void(0)" onsubmit="searchpage()" >
<input id="t1" type="text" name="t1" />
<input id="button" type="submit" value="FIND" name="b1" onclick="searchpage()" />
</form>
JAVASCRIPT
function searchpage() {
if (document.getElementById("t1").value != null && this.document.getElementById("t1").value != '') parent.findString(document.getElementById("t1").value);
return false;
}
var TRange = null;
function findString(str) {
if (parseInt(navigator.appVersion) < 4) return;
var strFound;
if (window.find) {
// CODE FOR BROWSERS THAT SUPPORT window.find
strFound = self.find(str);
if (!strFound) {
strFound = self.find(str, 0, 1);
while (self.find(str, 0, 1)) continue;
}
}
else if (navigator.appName.indexOf("Microsoft") != -1) {
// EXPLORER-SPECIFIC CODE
if (TRange != null) {
TRange.collapse(false);
strFound = TRange.findText(str);
if (strFound) TRange.select();
}
if (TRange == null || strFound == 0) {
TRange = self.document.body.createTextRange();
strFound = TRange.findText(str);
if (strFound) TRange.select();
}
}
else if (navigator.appName == "Opera") {
alert("Opera browsers not supported, sorry...")
return;
}
if (!strFound) alert("String '" + str + "' not found!") return;
}​
it is also important to note that while this works in Firefox and Chrome, the "string not found!" alert box doesn't work

Here's a version dapted from another answer of mine.
Demo: http://jsfiddle.net/MRp2G/5/
Code:
function doSearch(text) {
var sel;
if (window.find && window.getSelection) {
sel = window.getSelection();
if (sel.rangeCount > 0) {
sel.collapseToEnd();
}
window.find(text);
} else if (document.selection && document.body.createTextRange) {
sel = document.selection;
var textRange;
if (sel.type == "Text") {
textRange = sel.createRange();
textRange.collapse(false);
} else {
textRange = document.body.createTextRange();
textRange.collapse(true);
}
if (textRange.findText(text)) {
textRange.select();
}
}
}

Related

Can not detect the browser MS edge using javascript

I have a problem.I need to detect the browser Microsoft edge using Javascript.I am explaining my code below.
<input type="button" class="btn btn-success" id="saveData" value="Browser" style="margin-right:20px;" onclick="CheckBrowser();" />
function CheckBrowser() {
var x = checkBrowserType();
alert("your browser is "+ x);
}
function checkBrowserType() {
var objappVersion = navigator.appVersion;
var objAgent = navigator.userAgent;
var objbrowserName = navigator.appName;
var objfullVersion = '' + parseFloat(navigator.appVersion);
var objBrMajorVersion = parseInt(navigator.appVersion, 10);
var objOffsetName, objOffsetVersion, ix;
if ((objOffsetVersion = objAgent.indexOf("Chrome")) != -1) {
objbrowserName = "Chrome";
} else if ((objOffsetVersion = objAgent.indexOf("MSIE")) != -1) {
objbrowserName = "Microsoft Internet Explorer";
} else if ((objOffsetVersion = objAgent.indexOf("Firefox")) != -1) {
objbrowserName = "Firefox";
} else if ((objOffsetVersion = objAgent.indexOf("Safari")) != -1) {
objbrowserName = "Safari";
} else if ((objOffsetName = objAgent.lastIndexOf(' ') + 1) < (objOffsetVersion = objAgent.lastIndexOf('/'))) {
objbrowserName = objAgent.substring(objOffsetName, objOffsetVersion);
objbrowserName = objAgent.substring(objOffsetName, objOffsetVersion);
} else {}
return objbrowserName;
}
Here i have a button and when user will click on that button the respective browser should detect.Here I also need to detect the browser Microsoft edge.Please help me.

Why does Javascript not focus dynamically loaded element

I have a form in which some elements are loaded by ajax according to user selection. I try to insert some symbols into the textarea in the form by javascript. I use last focused method with inserttext function. Function only insert symbols into the textarea but not dynamically loaded textarea.Javascript code is at the end of body.
Thanks in advance.
AJAX:
function fetch_no_answer_choice(val){
$.ajax({
type: 'POST',
url: 'fetch_no_answer_choice.php',
data: {'get_option' : val},
success: function (response) {document.getElementById("choice").innerHTML=response;}
});
}
fetch_no_answer_choice.php
<?php
if(isset($_POST['get_option'])){
$choice = $_POST['get_option'];
if ($choice !== 0){
$ans = array('A','B','C','D','E','F','G','H','I','J');
$no = 0;
for ($no = 0; $no<$choice; $no++){
echo'<textarea name = "textarea_'.$ans[$no].'" ></textarea> }
}
exit();
}
?>
JAVASCRIPT
var lastFocused;
$("textarea").focus(function() {
lastFocused = document.activeElement;
});
function insertText(text) {
var input = lastFocused;
console.log(input);
if (input == undefined) { return; }
var scrollPos = input.scrollTop;
var pos = 0;
var browser = ((input.selectionStart || input.selectionStart == "0") ?
"ff" : (document.selection ? "ie" : false ) );
if (browser == "ie") {
input.focus();
var range = document.selection.createRange();
range.moveStart ("character", -input.value.length);
pos = range.text.length;
}
else if (browser == "ff") { pos = input.selectionStart };
var front = (input.value).substring(0, pos);
var back = (input.value).substring(pos, input.value.length);
input.value = front+text+back;
pos = pos + text.length;
if (browser == "ie") {
input.focus();
var range = document.selection.createRange();
range.moveStart ("character", -input.value.length);
range.moveStart ("character", pos);
range.moveEnd ("character", 0);
range.select();
}
else if (browser == "ff") {
input.selectionStart = pos;
input.selectionEnd = pos;
input.focus();
}
input.scrollTop = scrollPos;
}

How can I keep text highlighting after pasting?

I have a small markdown editor
Demo
HTML:
<textarea id="txtarea">this is a **test**</textarea>
<button data-marker="**">Bold (toggle)</button>
<button data-marker="~~">Strike through (toggle)</button>
<button data-marker="*">Italics (toggle)</button>
JS:
function toggleMarker(marker, el) {
var markerLength = marker.length;
var startPos, endPos, selection, range;
if (document.selection != undefined) { // IE
el.focus();
range = document.selection.createRange();
selection = range.text;
} else if (el.selectionStart != undefined) { // Firefox
startPos = el.selectionStart;
endPos = el.selectionEnd;
selection = el.value.substring(startPos, endPos);
}
if (!selection.length){
return;
}
if (el.value.substring(startPos-markerLength,startPos) === marker
&& el.value.substring(endPos,endPos+markerLength) === marker
){
el.value = el.value.substring(0,startPos-markerLength) +
selection +
el.value.substring(endPos+markerLength);
}
else{
el.value = el.value.substring(0,startPos) + marker +
selection + marker + el.value.substring(endPos);
}
}
$(document).on('mousedown', 'button', function(e) {
toggleMarker( $(this).data('marker'), $('#txtarea').get(0) ).text;
});
Now I need to keep the highlighting of pasted text. How can I do that?
http://codepen.io/medinasod/pen/GoOrwq
JS:
var markerLength,
startPos,
endPos,
selection,
range;
function selectText(startPos, endPos, markerLength, marker) {
mytxtarea = document.getElementById("txtarea");
window.setTimeout(function() {
if (mytxtarea.value.substring(startPos-markerLength,startPos) === marker && mytxtarea.value.substring(endPos,endPos+markerLength) === marker) {
mytxtarea.setSelectionRange(startPos+markerLength, endPos+markerLength);
} else {
mytxtarea.setSelectionRange(startPos+markerLength, endPos+markerLength);
}
}, 0);
}
function toggleMarker(marker, el) {
markerLength = marker.length;
if (document.selection != undefined) { // IE
el.focus();
range = document.selection.createRange();
selection = range.text;
} else if (el.selectionStart != undefined) { // Firefox
startPos = el.selectionStart;
endPos = el.selectionEnd;
selection = el.value.substring(startPos, endPos);
}
if (!selection.length){
return;
}
if (el.value.substring(startPos-markerLength,startPos) === marker
&& el.value.substring(endPos,endPos+markerLength) === marker
){
el.value = el.value.substring(0,startPos-markerLength) +
selection +
el.value.substring(endPos+markerLength);
}
else{
el.value = el.value.substring(0,startPos) + marker +
selection + marker + el.value.substring(endPos);
}
selectText(startPos, endPos, markerLength, marker);
}
$(document).on('mousedown', 'button', function(e) {
toggleMarker( $(this).data('marker'), document.getElementById('txtarea'));
});
HTML:
<textarea id="txtarea">this is a test</textarea>
<button data-marker="**">Bold (toggle)</button>
<button data-marker="~~">Strike through (toggle)</button>
<button data-marker="*">Italics (toggle)</button>

How to select text in IE?

I'm using the following function to get selected text and it works very well in all major browsers but it doesn't work correctly in IE before version 9!
function getSelected() {
var t = '';
if (window.getSelection) {
t = window.getSelection();
} else if (document.getSelection) {
t = document.getSelection();
t = t.toString();
} else if (document.selection) {
t = document.selection.createRange();
t = t.text;
}
return t;
}
var txt = getSelected();
The problem here that with IE before version 9 it doesn't store any text in the variable "txt"
DEMO: http://jsfiddle.net/ytJ35/
The below is taken from How to get selected html text with javascript?
this javascript function works in IE7 and above:
function getSelected() {
var text = "";
if (window.getSelection
&& window.getSelection().toString()
&& $(window.getSelection()).attr('type') != "Caret") {
text = window.getSelection();
return text;
}
else if (document.getSelection
&& document.getSelection().toString()
&& $(document.getSelection()).attr('type') != "Caret") {
text = document.getSelection();
return text;
}
else {
var selection = document.selection && document.selection.createRange();
if (!(typeof selection === "undefined")
&& selection.text
&& selection.text.toString()) {
text = selection.text;
return text;
}
}
return false;
}
Tested in chrome, IE10, IE6, IE7

how to get HTML with "window.getSelection()"

My code:
<p id="p">
123<span>abc</span>456
</p>
<script>
document.getElementById("p").onmouseup=function(){
if (window.getSelection) {
//code
}
else if (document.selection) {
alert(document.selection.createRange().htmlText) //IE6 7 8
}
}
</script>
what to write at "//code" that I could get the same htmlText in chrome or FF ?
http://jsfiddle.net/kyP83/
document.getElementsByTagName('p')[0].onmouseup = function() {
if (typeof window.getSelection === 'function') {
//code
var selObj = window.getSelection();
alert(selObj);
var selRange = selObj.getRangeAt(0);
} else if (document.selection) {
alert(document.selection.createRange().htmlText) //IE6 7 8
}
}

Categories