How do I Select the text in an input element

LyndonOHRC · Feb 24, 2014

I am giving focus to an input element but also want to select all the text that it contains so the user can easily replace it with a new value.
Giving focus works fine but the select() method doesn't seem to work. No text ever gets selected.

I've tested in IE 11 and Firefox 27.0.1 with same result.

I've tried:

Code:

document.getElementById('RanchNameSearchString').focus();
document.getElementById('RanchNameSearchString').select();

Also tried:

Code:

$('#RanchNameSearchString').focus(function () {
   $('#RanchNameSearchString').select();
});

Also tried:

Code:

$('#RanchNameSearchString').focus();
$('#RanchNameSearchString').select();

Nothing seems to work. Any help appreciated

Complete document:

Code:

<html>
<head>
    <meta charset="utf-8" />
    <title>Ranch Lookup</title>
		<link rel="stylesheet" type="text/css" href="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">[/URL]
		<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>[/URL]
		<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>[/URL]
		<script>
			$(document).ready(function(){
				var getDocumentBackgroundColor='White';
				
				$("#RanchNameDataInput, #OwnerLastNameDataInput").hide();
				$("#menuRow").css("background-color",getDocumentBackgroundColor); 
				$("#ZipCode").css("background-color","yellow"); 
				$("#ZipCode, #RanchName, #OwnerLastName").css({
					"text-decoration": "none", 
					"color": "DodgerBlue", 
					"font-weight": "Bold",
					"font-family": "Verdana",
					"font-size": "12px", 
					"padding": "2px",
					"vertical-align": "center",
					"background-color":"White"
			    });
				
				$(".menuTable").css({
					"margin":"4px",
					"display": "inline-block",
					"padding":"2px",
					"border-style":"solid",
					"border-color":"DodgerBlue",
					"border-width":"1px",
					"border-collapse":"collapse",
					"background-color":"White"
				});
				
				$(".menuHeading").css({
					"text-decoration":"none", 
					"color": "DarkBlue", 
					"font-weight": "Bold",
					"font-family": "Verdana",
					"font-size": "10px", 
					"padding": "2px",
					"padding-bottom": "5px",
					"vertical-align": "center"
			    });
				
				$(".menuOptions").css({"margin":"2px"});
			
			  $("#ZipCode").click(function(){
				$("#ZipCode, #RanchName, #OwnerLastName").css("background-color",getDocumentBackgroundColor); 
				$("#ZipCode").css("background-color","yellow"); 
				$("#RanchNameDataInput, #OwnerLastNameDataInput").hide();
				$("#ZipCodeDataInput").show();
				$('#ZipCodeSearchString').focus();
			  });
				$("#RanchName").click(function(){
				$("#ZipCode, #RanchName, #OwnerLastName").css("background-color",getDocumentBackgroundColor);  
				$("#RanchName").css("background-color","yellow"); 
				$("#OwnerLastNameDataInput, #ZipCodeDataInput").hide();
				$("#RanchNameDataInput").show();
				$('#RanchNameSearchString').focus();
			  });
				$("#OwnerLastName").click(function(){
				$("#ZipCode, #RanchName, #OwnerLastName").css("background-color",getDocumentBackgroundColor);  
				$("#OwnerLastName").css("background-color","yellow"); 
				$("#RanchNameDataInput, #ZipCodeDataInput").hide();
				$("#OwnerLastNameDataInput").show();
				$("#OwnerLastNameSearchString").focus();
			  });
			});
			$(function() {
				$("#ZipCodeSearchString").autocomplete({ 
					source: "NoMenu/RanchZipCodeSearchResults.cfm", 
					minLength: 2, 
					autoFocus: true,
					delay: 200,
					select: function(event, ui) { 
						$('#ZipCodeDataTable').html(
							ui.item.value
						);
					} 
				});
			});
			
			$(function() {
				$("#RanchNameSearchString").autocomplete({ 
					source: "NoMenu/RanchNameSearchResults.cfm", 
					minLength: 2, 
					autoFocus: true,
					delay: 200,
					select: function(event, ui) {
						$('#RanchNameDataTable').append(
							'<div><a href="RanchPrintByRanchName.cfm?RanchName=' + ui.item.value + '" target="_blank">' + ui.item.value + '</a></div>'
						);
						document.getElementById('RanchNameSearchString').focus();
						document.getElementById('RanchNameSearchString').select();
						
						/*$('#RanchNameSearchString').focus(function () {
						    $('#RanchNameSearchString').select();
						});*/
					}
				});
			});

			$(function() {
				$("#OwnerLastNameSearchString").autocomplete({ 
					source: "NoMenu/OwnerLastNameSearchResults.cfm", 
					minLength: 2, 
					autoFocus: true,
					delay: 200,
					select: function(event, ui) { 
						$('#OwnerLastNameDataTable').html(
							ui.item.value
						);
					} 
				});
			});
		</script>
	</head>
	<body>
		<div>&nbsp;</div>
		<div class="menuTable">
			<div class="menuHeading">
				Select a Search Criteria
			</div>
			<div class="menuOptions">
				<span id="ZipCode" title="Select to Search by Zip Code">
					Zip
				</span>
				<span id="RanchName" title="Select to Search by Ranch Name">
					Ranch
				</span>
				<span id="OwnerLastName" title="Select to Search by Owner Last Name">
					Owner
				</span>
			</div>
		</div>
		<div></div>
		<div class="menuTable">
			<div id="ZipCodeDataInput">
				<label for="OwnerLastNameSearchString" class="dataDisplay">
					Zip Code:
				</label>
				<input 
					type="text" 
					id="ZipCodeSearchString" 
					name="ZipCodeSearchString" 
					size="25" 
					maxlength="25" 
					autofocus 
					title="Enter All or Part of a Zip Code" 
					autocomplete="off"
				/>
				<div class="dataDisplay">
					Zip Codes
					<div id="ZipCodeDataTable"></div>
				</div>
			</div>
			<div id="RanchNameDataInput">
				<label for="RanchNameSearchString" class="dataDisplay">
					Ranch Name:
				</label>
				<input 
					type="text" 
					id="RanchNameSearchString" 
					name="RanchNameSearchString" 
					size="25" 
					maxlength="25" 
					title="Enter All or Part of a Ranch Name" 
					autocomplete="off"
				/>
				<div class="dataDisplay">
					Ranch Names
					<div id="RanchNameDataTable"></div>
				</div>
			</div>
			<div id="OwnerLastNameDataInput">
				<label for="RanchNameSearchString" class="dataDisplay">
					Owner Last Name:
				</label>
				<input 
					type="text" 
					id="OwnerLastNameSearchString" 
					name="OwnerLastNameSearchString" 
					size="25" 
					maxlength="125" 
					title="Enter All or Part of an Owner Last Name" 
					autocomplete="off"
				/>
				<div class="dataDisplay">
					Owner Last Names
					<div id="OwnerLastNameDataTable"></div>
				</div>
			</div>
		</div>
	</body>
</html>

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

vacunita · Feb 24, 2014

Define select. You want to get the text highlighted as in its selected by the mouse.

Or you want to get the value of the textbox?

The Select() function highlights the text.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

LyndonOHRC · Feb 24, 2014

give the element focus and highlight text so uses doesn't have to delete existing to enter another value.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

ChrisHirst · Feb 25, 2014

HTML:

onfocus = "this.select()"

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

vacunita · Feb 25, 2014

Then yes. the select() function is correct.

The next question would be when you want this to happen?

Your focus and select code here, never runs.

Code:

$(function() {
				$("#RanchNameSearchString").autocomplete({ 
					source: "NoMenu/RanchNameSearchResults.cfm", 
					minLength: 2, 
					autoFocus: true,
					delay: 200,
					select: function(event, ui) {
						$('#RanchNameDataTable').append(
							'<div><a href="RanchPrintByRanchName.cfm?RanchName=' + ui.item.value + '" target="_blank">' + ui.item.value + '</a></div>'
						);
						document.getElementById('RanchNameSearchString').focus();
						document.getElementById('RanchNameSearchString').select();
						
						/*$('#RanchNameSearchString').focus(function () {
						    $('#RanchNameSearchString').select();
						});*/
					}
				});
			});

However, if you place the select() call when you show the inputs after clicking one of the options then you get the desired outcome.

Code:

$("#RanchName").click(function(){
				$("#ZipCode, #RanchName, #OwnerLastName").css("background-color",getDocumentBackgroundColor);  
				$("#RanchName").css("background-color","yellow"); 
				$("#OwnerLastNameDataInput, #ZipCodeDataInput").hide();
				$("#RanchNameDataInput").show();
[b]				[COLOR=#A40000]$('#RanchNameSearchString').select();[/color][/b]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

LyndonOHRC · Feb 25, 2014

BTW, I'm just trying to learn jquery, that is probably why this seemingly simple task is giving me trouble.

Chris, I tried "onfocus = "this.select()" in the elements tag and it isn't working in this context for some reason.

Phil, I'm trying to get the behavior to trigger after an autocomplete selection is made on the RanchNameSearchString element. So I put it after the "select:" section. The append behavior I have just above the focus/select works great. Your suggestion to put it after "$("#RanchName").click(function(){" didn't do it either.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

jpadie · Feb 25, 2014

i think you need to use the mouseup event. you could also add a keyup event but you would need to apply the listener only when the control did not have focus, and remember to disapply on focus.

Code:

$("#ZipCodeSearchString")
 .autocomplete({ 
  source: "NoMenu/RanchZipCodeSearchResults.cfm", 
  minLength: 2, 
  delay: 200,
  select: function(event, ui) { $('#ZipCodeDataTable').html(ui.item.value); }
 }) 
 .on('mouseup',function(e){$(this).select();});

LyndonOHRC · Feb 25, 2014

jpadie,
this only selects the text when I mouse click on the element, was hoping to give focus and highlight the text when an autoselect is made.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

jpadie · Feb 25, 2014

Sorry but I don't understand what you mean.

When you type in a selection an unordered list is shown with list items that match the criteria.

When you click on one of those list items typically the clicked item's text will be put into the input box.

Is it THAT text that you want to be highlighted? If so in what circumstances? Please be precise in your references so that we do not communicate at cross purposes.

LyndonOHRC · Feb 25, 2014

Yes, the RanchNameSearchString input element has a jquery autoselect attached to it. When the user picks a value using that autoselect I have code that appends the value selected into a div below, that works fine; I then want that same input element, RanchNameSearchString, to get focus and have its text highlighted.

Code:

$(function() {
  $("#RanchNameSearchString").autocomplete({ 
    source: "NoMenu/RanchNameSearchResults.cfm", 
	minLength: 2, 
	autoFocus: true,
	delay: 200,
	select: function(event, ui) {
	$('#RanchNameDataTable').append(
	'<div><a href="RanchPrintByRanchName.cfm?RanchName=' + ui.item.value + '" target="_blank">' +  ui.item.value+ '</a></div>'
    );
	document.getElementById('RanchNameSearchString').focus();
	document.getElementById('RanchNameSearchString').select();
  }
   });
 });

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

jpadie · Feb 25, 2014

please provide the absolute url for the search form (RanchZipCodeSearchResults.cfm) so that we can test potential solutions

LyndonOHRC · Feb 25, 2014

The autoselect works fine, the append works fine, it's just the focus/select that's not working. Thanks for your time.

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

jpadie · Feb 25, 2014

thank you for the clarification. please see my earlier post as at 25 Feb 14 15:06

vacunita · Feb 25, 2014

Try:

Code:

$(function() {
  $("#RanchNameSearchString").autocomplete({ 
    source: "NoMenu/RanchNameSearchResults.cfm", 
	minLength: 2, 
	autoFocus: true,
	delay: 200,
	select: function(event, ui) {
	$('#RanchNameDataTable').append(
	'<div><a href="RanchPrintByRanchName.cfm?RanchName=' + ui.item.value + '" target="_blank">' +  ui.item.value+ '</a></div>'
    );
	[b][COLOR=#A40000]$(this).select();[/color][/b]
  }
   });
 });

Otherwise we would need to see the full page running so we can test other solutions as jpadie mentions.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I Select the text in an input element

LyndonOHRC

Programmer

vacunita

Programmer

LyndonOHRC

Programmer

ChrisHirst

IS-IT--Management

vacunita

Programmer

LyndonOHRC

Programmer

jpadie

Technical User

LyndonOHRC

Programmer

jpadie

Technical User

LyndonOHRC

Programmer

jpadie

Technical User

LyndonOHRC

Programmer

jpadie

Technical User

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor