Sending html input value only for mobile devices using CSS - html

The goal is to send a hidden input value to the server only when coming from a mobile device. I wanted to use CSS media queries so that it stays responsive.
I tried this so far:
Not displaying the field
<input type='hidden' name='mobile' value='yes' style="display:none">
Result: still sent to server
CSS content
<div class='mobile-only'></div>
#media (max-width: 768px) {
.mobile-only {content: "<input type='hidden' name='mobile' value='yes'>"}
}
Result: not sent to server at all
Is the non-JS, CSS approach even possible?

You can mix in some javascript and get it done. Here's something you'd like to take a look at -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#media (max-width: 768px) {
#mymobileelement {display:none;}
}
</style>
<script type="text/javascript">
function setvalue () {
var ele = document.getElementById("mymobileelement");
var isVisible = ele.offsetWidth > 0 || ele.offsetHeight > 0;
document.getElementById("ValueToSendToServer").value = (isVisible) ? "pc" : "mobile";
alert("Server will recieve = " + document.getElementById("ValueToSendToServer").value);
}
</script>
</head>
<body>
<input type="button" onclick="javascript:setvalue();" value="Click me to see what server will get">
<input type="hidden" value="pc" id="ValueToSendToServer">
<div id="mymobileelement"></div>
</body>
</html>

.mobile-only {content: "<input type='hidden' name='mobile' value='yes'>"}
This is invalid code - the content attribute is only valid on the ::before and ::after pseudoelements. However, even if you fix that it will not work, since the content attribute will only insert text, not 'more elements' as you are trying to do now.
There is no solution for your problem this way. Not only should CSS never have influence on behaviour like this, but it would also be highly unreliable - I can resize my desktop browser to 500px wide no problem.
You will need JS to achieve this effect, but even then it will remain unreliable, like anything coming from a client.

Related

How do I trump chrome's user agent stylesheet selector "-internal-autofill-selected"?

Issue
I am applying a class "error" to an input tag when a user changes the text in the textbox. This class is used to change the background color of the textbox and keep a record of what has been changed. This works perfectly in other browsers, but when a user selects an option from an autofill box in chrome, the class is still applied, but chrome's user agent style still trumps my style, preventing the correct background color from being applied.
To make matters more confusing, when I inspect the page and look at computed styles, chrome strikes through the style that should be overridden, but still says that it is the style being applied:
I Have Tried
increasing the specificity of my style rule.
overwriting chromes selector (this throws a warning that ":-internal-autofill-selected" is not a valid pseudo-class):
input:-internal-autofill-selected{
background-color: none !important;
}
Edge and Firefox (works as intended)
Clearing the cache, restarting the browser (although, maybe I missed something?)
one solution I found was to disable autofill for the page, but that will not work because autofill is very helpful for this textbox
Reproducible Code
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
function ChangeColorRed(e) {
e.target.classList.add("error");
}
$(document).ready(function () {
var txtboxes = document.getElementsByTagName('input');
for (var j = 0; j < txtboxes.length; j++) {
txtboxes[j].addEventListener('input', ChangeColorRed);
}
});
</script>
<style>
#txtOrderNumber.error, #txtItem.error{
background-color:#FFCCCB !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
Order Number:
<input type="text" id="txtOrderNumber" class="form-control inputText"/>
Item#:
<input type="text" id="txtItem" class="form-control inputText"/>
<input type="submit" name="btnSelect" value="Select" id="btnSelect" class="btn btn-secondary"/>
</form>
</body>
I suspect the answer to this is either something really simple that I am missing or some strange chrome phantom error. Any insight into what I might be doing wrong would be greatly appreciated.
UPDATE
CBroe supplied a workaround in the comments that is the best solution so far. Updating the script to the code below, makes Chrome stop thinking this field was auto-filled
function ChangeColorRed(e) {
e.target.classList.add("error");
}
function BackgroundColorWorkaround() {
document.querySelector('#txtOrderNumber').value = document.querySelector('#txtOrderNumber').value
document.querySelector('#txtItem').value = document.querySelector('#txtItem').value
}
$(document).ready(function () {
var txtboxes = document.getElementsByTagName('input');
for (var j = 0; j < txtboxes.length; j++) {
txtboxes[j].addEventListener('input', ChangeColorRed);
txtboxes[j].addEventListener('blur', BackgroundColorWorkaround);
}
});

Auto increase size of input with text entered

I have a HTML code in which the users enter the comment for a particular question if the size of comments are big i want my text box to auto increase in height with the comments
Below is my HTML code:
<label class="label-reports">Comments</label>
<input #((ViewBag.UserId != null && ViewBag.UserId == question.AnsweredBy) || (question.AnsweredBy == null) ? "" : "disabled") type="text" class="form-control" style="align-content:stretch; min-width:1200Px; width: auto !important" for="comments" value="#question.Comments" />
I tried to implement this
<textarea class="form-control" rows="5"></textarea>*
but did not succeed can someone suggest to increase the size of text box with increase in text
For <textarea> Elements...
If you aren't opposed to using a plug-in, you could use something like autosize, which will allow your <textarea> element to grow as expected :
<!-- Example autosize.js CDN Reference -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script>
<script>
// Automatically size all of your <textarea> elements as you type
autosize(document.querySelectorAll('textarea'));
</script>
Interactive Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Autosize Example</title>
</head>
<body>
<pre>Start typing (and press Enter a few times)</pre>
<textarea></textarea>
<script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script>
<script>
autosize(document.querySelectorAll('textarea'));
</script>
</body>
</html>
For <input> elements...
<input> elements don't have to be left out. There is an aptly-named autosize-input plug-in that essentially accomplishes the same basic thing :
<!-- Example autosize.js CDN Reference -->
<script src="https://rawgit.com/yuanqing/autosize-input/master/autosize-input.min.js"></script>
<script>
// Automatically size all of your <textarea> elements as you type
autosizeInput(document.querySelector('#YourInputID'));
</script>

show * when field not valid

I am at level 0 in breeze so bear with me. I dont want any ready made code as of now. I am using breeze and want to do client side validation. What i want is to show "*" near html input if data entered is not valid. Below is my code to bind to data returned from breeze.
<td > <input data-bind="value: Name" /></td>
How can i achieve this using breeze? Please do let me know if there any live example i can refer to.
I tried googling but couldnt find any examples.
Not breeze, but pure JS might help?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type='text/css'>
span.red { color:red; }
</style>
<script>
function ValidateFields() {
//usually use regex to check phones, this is only example.
// test if value is '123456' in this example.
if ('123456' == document.getElementById('inpPhone').value) {
document.getElementById('spnPhoneValid').innerHTML = '';
} else {
document.getElementById('spnPhoneValid').innerHTML = '*';
}
}
</script>
</head>
<body>
Phone Number (Only 123456):<input id='inpPhone' onchange='ValidateFields();'> <span class='red' id='spnPhoneValid'>*</span>
</body>
</html>
And of course it's for the client's usability and not instead of server-side validation!
Breeze IS NOT a tool for making html/css modifications to the page view. Breeze knows nothing about DOM.

How to include google search result in my specified div width and height?

<input type="text" name="q" placeholder="Search..." />
<input type="image" src="images/searchBtn.png" name="q" />
<div id="searchResult"></div>
css...
#searchResult{width: 1000px; height: 200px;}
How to do????
This is a sample which I have tried. try this.
<head>
<title>Search</title>
<style>
#searchcontrol
{
margin-LEFT:500PX;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
google.load('search', '1');
function DoSearch()
{
// Create a search control
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.WebSearch());
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute(document.getElementById("secrchBox").value);
}
//]]>
</script>
</head>
<body>
<div id="searchcontrol">
<input type="text" id="secrchBox"/>
<input type="button" value="Submit" onclick=" DoSearch()"/>
</div>
</body>
</html>
EDIT
<head>
<title>Search</title>
<style>
#searchcontrol
{
margin-LEFT:500PX;
}
</style>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
//<!
google.load("search", "1", { "nocss": true });
function DoSearch()
{
var ss = document.getElementById("secrchBox").value;
// Create a search control
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.WebSearch());
searchControl.draw(document.getElementById("searchcontrol"));
// execute an inital search
searchControl.execute(ss);
}
//]]>
</script>
</head>
<body>
<div id="searchcontrol">
<input type="text" id="secrchBox"/>
<input type="button" value="Submit" onclick=" DoSearch()"/>
</div>
</body>
</html>
Now default css will not load. You can customize as your wish.
you put the <iframe>, <script>, or whatever Google gives you inside your div!
<div id="searchResult">Google code here!</div>
You may have three options.
-The hardest one is to parse google result page. This could be done with php and some regular expressions work. If you are an experienced developer, this is the best.
-Second is to use googlesearch API. This one is very easy to implement. You can see how to do it here. It supports REST calls, which are super easy to use. Pros: Relatively easy to implement, lots of documentation and examples. Cons are that you have an usage quota of 100 queries per day. Also remember that you need to get your API-KEY and register to use it.
-Third one, Include an Iframe. This is super easy to implement, just one line of code, but it's not clean and probably you don't want to have google's page inside yours.
Probably there's another one mixing a lot of javascript and Iframes, but, I don't see the point of doing that since there are many better options.
Let me know if you have any questions..
Thanks!,
#leo.

Placeholder attribute on text input with iOS 6 from landscape to portrait

I have a problem after updating to iOS 6 that is driving me nuts.
It looks like any time I have the attribute "placeholder" on an input field, while rotating from
Portrait to Landscape and back to Portrait again the page shifts some pixels on the left side causing a horizontal bar.
I concluded after long research that it has to be something related to the meta viewport because every time I use the content="width=device-width" all works fine.
P.S Yes I really need to have a percent width on the input so as to have liquid design:)
Here is the example to recreate the issue. Thanks...
<html>
<head>
<title>test</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
</head>
<body>
<div style="width:100%;background-color:red">
<input id="testInput" placeholder="test" style="width:90%;" />
</div>
</body>
</html>
Applying "overflow: hidden;" on the containing element solved this issue for me.
I found this problem.
and fix it.
(URL : http://mooki83.tistory.com/2656550 (in korean))
testURL : http://mooki83.da.to/m/testios6.html
javascript :
/* Optimized PLACEHOLDER for iOS6 - Mooki ( http://mooki83.tistory.com ) */
$(document).ready(function(){
$(window).bind("orientationchange.fm_optimizeInput", fm_optimizeInput);
});
function fm_optimizeInput(){
$("input[placeholder],textarea[placeholder]").each(function(){
var tmpText = $(this).attr("placeholder");
if ( tmpText != "" ) {
$(this).attr("placeholder", "").attr("placeholder", tmpText);
}
})
}
CSS fix:
body>div {
overflow-y: auto;
}
Non js answer
Add overflow:hidden to parent element
and it will work like a charm