Добавить текст в поле ввода без изменения его значения?

Прошло некоторое время с момента ответа, но это может помочь кому-то. Поскольку у вас уже есть XMLDocument, вы можете удалить и преобразовать атрибуты перед его сериализацией. Я попытался либо удалить атрибуты, либо преобразовать их в элементы.

public static void RemoveAllAttributes(XmlDocument xmlDocument)
{
     if (xmlDocument == null || !xmlDocument.HasChildNodes) return;

     foreach (var xmlElement in xmlDocument.SelectNodes(".//*").Cast<XmlElement>().Where(xmlElement => xmlElement.HasAttributes))
     {
          xmlElement.Attributes.RemoveAll();
     }
}

public static void ElementifyAllAttributes(XmlDocument xmlDocument)
{
    if (xmlDocument == null || !xmlDocument.HasChildNodes) return;

    foreach (var xmlElement in xmlDocument.SelectNodes(".//*").Cast<XmlElement>().Where(xmlElement => xmlElement.HasAttributes))
    {
        foreach (XmlAttribute xmlAttribute in xmlElement.Attributes)
        {
            xmlElement.AppendChild(xmlDocument.CreateElement(xmlAttribute.Name)).InnerText = xmlAttribute.Value;
        }

        xmlElement.Attributes.RemoveAll();
     }
}

И затем;

private static string XmlToJson(XmlDocument xmlDocument)
{
    if (xmlDocument == null) return null;

    //Remove xml declaration
    xmlDocument.RemoveChild(xmlDocument.FirstChild);

    //Convert attributes to elements
    ElementifyAllAttributes(xmlDocument);

    return JsonConvert.SerializeXmlNode(xmlDocument, Formatting.None, false);
}
0
задан ignite-me 16 January 2019 в 14:14
поделиться

3 ответа

Вы могли бы сделать это несколько дешевле, просто вставив диапазон после ввода и применив отрицательное поле справа к входу:

<input type='number' style='margin-right: -10em;'><span>days</span>

Таким образом, вы вообще не касаетесь своих данных, и это остается чисто косметическим.

0
ответ дан night_owl 16 January 2019 в 14:14
поделиться

Вместо того, чтобы вставлять блок во вход, почему бы не иметь особый стиль ввода для этих сценариев, где вы можете добавить или добавить любой блок. Что-то вроде:

.unit-input {
  border: #DFDFDF solid 1px;
  display: inline-flex;
  border-radius: 4px;
  overflow: hidden;
  font-family: sans-serif;
  width: 10em;
}

.unit-input__input {
  border: 0;
  padding: .5em;
  font-size: 1em;
  width: 100%;
}

.unit-input__input:focus {
  background: #EDFFFB;
  outline: none;
}

.unit-input__prepend,
.unit-input__append {
  background: #F4F4F4;
  padding: .5em;
  border: #DFDFDF solid 0;
  flex-grow: 0;
}

.unit-input__prepend {
  border-right-width: 1px;
}

.unit-input__append {
  border-left-width: 1px;
}
<p>
  <span class="unit-input">
    <input class="unit-input__input" type="number">
    <span class="unit-input__append">days</span>
  </span>
</p>

<p>
  <span class="unit-input">
    <span class="unit-input__prepend">[111]lt;/span>
    <input class="unit-input__input" type="number">
  </span>
</p>

<p>
  <span class="unit-input">
    <input class="unit-input__input" type="number">
    <span class="unit-input__append">kg</span>
  </span>
</p>

0
ответ дан shanomurphy 16 January 2019 в 14:14
поделиться

Вы можете установить абсолютную позицию диапазона или: после в конце ввода. Это более полезно, если вы знаете длину ввода. В противном случае я бы использовал JS, чтобы вычислить ширину ввода и добавить его.

.wrapper {
  display: inline-block;
  border: 1px solid gray;
  position: relative;
  font-family: Arial;
  font-size: 1rem;
}

.wrapper:after {
  content: 'kg';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: .5rem;
  pointer-events: none;
}

input {
  width: 4rem;
  padding: .5rem;
  border: none;
  box-sizing: border-box;
  display: block;
  font-size: 1rem;
}
<div class="wrapper">
  <input type="text" value="100">
</div>

0
ответ дан guitarzero 16 January 2019 в 14:14
поделиться