The search bar here uses the following code with placeholder text and en empty value to search everything by default:
if(CleanSQLText(Request.Querystring("Q"))="") then
SearchQuery=""
<input type="text" placeholder="e.g. Shops" name="Q" value="<%=SearchQuery%>" onclick="if (this.defaultValue == this.value) { this.value = ''; }">
The problem is when no value is entered and no selects chosen, the results keep using the old value 'e.g. Shops', which changed to placeholder text.
Search results heading:
<h2 class="searchResults">Businesses matching "<%=SearchQuery%>"</h2>
How can that happen when there is no value?
The placeholder text is actual text in the box. And ASP.NET is doing something funky to get it to behave like it does. I haven't used it too much because of ASP.NET's weirdness but its perfectly valid.
What is happening is that the text box has your prompt text and they click search so it isn't empty like you think it should be.
You could put an if(text != 'My Prompt Text').
If your prompt text is a valid search the user could use, then I would suggest you track if the user has clicked on the text box with jQuery, the onclick even, and a Boolean stored as an attr on that element.
Related
all. I'm curious to know if the regular text input (not text area) could detect multiple lines value. If I copy any string that has various lines and pastes it into a standard input box, it will display as a single-line string and has no idea whether it has multiple lines or a single line.
I just want to know if we can preserve the original value (with multiple lines)
Original string value
INVOICE_500
INVOICE_501
After pasting it into the regular text input
INVOICE_500 INVOICE_501
Thanks in advance.
I found an article from a previous post where an way has been shown. We can use clipboard API as it copy text as it was written. It was applied on a div. I have converted it on a input field. I have attached the code below. Hope this might help you.
Reference article: Clipboard data on paste event
function handlePaste(e) {
var clipboardData, pastedData;
// Stop data actually being pasted into input
e.stopPropagation();
e.preventDefault();
// Get pasted data via clipboard API
clipboardData = e.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
// Do whatever with pasteddata
alert(pastedData);
}
document.getElementById('pasteInput').addEventListener('paste', handlePaste);
<input id='pasteInput' placeholder='Paste text here'></div>
No you can't, the only HTML input element that's designed to be multi-line is the "textarea" element.
<textarea name="textArea" cols="40" rows="5">
What's the best/recommended way to indicate a form field will have a particular default value if you don't fill it out? I'm especially thinking about fields that are dynamic based on other fields, and wanting it to be correctly accessible.
Think a URL slug. When creating an account, if you fill the field out then that's fine. If you don't, a value will be generated based on your username. But it won't be the same as your username, just generated from it.
Actually setting the form field seems bad because it makes it less obvious you can change it yourself.
I'm not sure if placeholder text works here, but I assume not. I could do an aria-labelledby pointing to something that says "Default value: xyz" but I'm not sure if that will work, or how well it will be understood by screen readers - especially if it's changing automatically.
Cheers
The best way to do this is to populate the input and expose the fact that it was automatically filled in via the label as an extra bit of information.
Labels on inputs are read once you focus the related input.
For this reason we can generate labels "on the fly" to contain whatever we want.
As such the best option here would be to generate the label on blur of the first input that the second input depends on.
Within the label we add the instructions that explain why this input is already filled in.
We then auto populate the second input based on the input of the first.
In the below example I have appended "URL" to the first input value in order to simulate some sort of transformation from username to URL.
I also remove the explanation in parenthesis if the user has changed the second input value.
$('#iUsername, #iUserURL').on('blur', function(){
var ElUserName = $('#iUsername');
var ElUserURL = $('#iUserURL');
if(ElUserURL.val() == ""){
ElUserURL.val(ElUserName.val() + "URL");
$('label[for="iUserURL"]').text("user url (you can change this if you want, we have set it as " + $('#iUsername').val() + "URL)");
}else if(ElUserURL.val() != ElUserName.val() + "URL"){
$('label[for="iUserURL"]').text("user url");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="iUsername">User Name</label><br/>
<input id="iUsername" /><br/>
<hr/>
<label for="iUserURL">User URL</label><br/>
<input id="iUserURL" /><br/>
<hr/>
<label for="itest">I have added this third input just so you have something to tab too, it does not add anything to the fiddle</label><br/>
<input id="itest" />
This has confused me since the early days. Maybe it's just in my head, but it seems to me as if this has varied over time, between browsers, and possibly even depending on the local language/locale.
Basically, whenever I need to check if a HTML input of type "radio" or "checkbox" has been set, I always do:
if (isset($_POST['the_name']) && trim($_POST['the_name']))
// do stuff
This just makes sure that the POST variable is sent whatsoever (which in itself doesn't mean that it was actually checked/selected, as far as I can tell, since its "value" can be an empty string) and that it's something other than '' (empty string). It seems like this has worked for a long time, but I have two problems with it:
It's ugly. I need to abstract it into a function, but then I want to know if it's a good idea in the first place, or wrong somehow.
It makes the assumption that any non-empty string value means "checked" or "selected", whereas the standard may say a specific string value such as "on", or maybe any number of such strings depending on the language/locale.
Are there cases where my above code falls apart? Do browsers ever submit POST forms where they include names which have no user input/selection in the HTTP request? Or does the existence of a name in the POST blob mean that that "field" has been actively changed/set/checked/selected?
The idea behind checkboxes is that the value is sent over to the server only if the checkbox was checked when submitting the form. The value can be anything, even an empty string. As long as the field is part of the transmitted form it means the box was ticked.
The value attribute is one which all <input>s share; however, it serves a special purpose for inputs of type checkbox: when a form is submitted, only checkboxes which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default.
This means you could have a form like this:
<form action="" method="get">
<input type="checkbox" name="c1" value="">
<input type="submit" value="Send">
</form>
If the checkbox is not checked when submitting then $_GET will be an empty array.
If the checkbox is checked then the value of $_GET will be:
array('c1' => '');
To check whether the box was ticked when sending the form you only need isset()
if (isset($_POST['c1']) {
// The box was checked!
}
Sometimes you would like to assign a value attribute to your checkbox. In such situations you can use the shorthand operator for isset() function ??.
// Create a variable from the checkbox value or assign an empty string if the box was not checked
$nyCheckbox = $_POST['c1'] ?? '';
See the code example below. When you select the text in the first input and drag it to the second input, what you are left with in the second input is just the text 'questions'.
Can anyone explain why this happens and if there's a way to keep all the text when dragging?
Thanks!
<input type="text" value="http://stackoverflow.com/questions"/>
<input type="text"/>
Attempt to drag some text from a text input to an empty text input. It will fail, and will raise an assert in debug builds:
ASSERT(oldLength >= selectionLength);
I think this is because WebCore is calculating oldLength from the wrong element; it looks like it's calculating the length of the text field being dragged to rather than the text field being dragged from.
There was a question previously on how to show hints in a text field (html form field), which clears automatically when the user clicks on the field under consideration. As in, when the field gets focus, the hint displayed inside the form gets cleared without the user having to manually delete the characters.
The solution given (and it works perfectly) -
<input onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
Now my question is, how do you format the text that is displayed as the hint (in this case "search"). By formatting, i would want it to be in a certain color and font type.
I can do this to the other fields, which do not have this preloaded hint in it, by using css-
color:#123123; font-family:calibri;
Thanks!
You're asking about styling the content (value) of an input element.
You can use regular CSS for this:
input {
color:#123123;
font-family:Calibri;
}
Working example: http://jsfiddle.net/fxxp4/